Jetpack compose doesn't recompose on mutableStateOf change

user_8447526 0
Viewed 2237

I wanted to build a very simple demo. A button which you can click, and it counts the clicks.

Code looks like this:

class MainActivity : ComponentActivity() {
    private var clicks = mutableStateOf(0)

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
           Surface(color = MaterialTheme.colors.background) {
                NewsStory(clicks.value) { onClick() }
           }
        }
    }

    private fun onClick() {
        clicks.value++
    }
}

@Composable
fun NewsStory(clicks: Int, onClick: () -> Unit) {
    Column(modifier = Modifier.padding(8.dp)) {
        Button(onClick = onClick) {
            Text("Clicked: $clicks")
        }
    }
}

From my understanding this should be recomposed everytime the button is clicked, as clicks is changed.

But it does not work, any ideas what I'm doing wrong here?

I'm on androidx.activity:activity-compose:1.3.0-beta01, kotlin 1.5.10 and compose version 1.0.0-beta08

android-jetpack-compose kotlin android
1 Answers

You need to use the "remember" keyword for the recomposition to happen each time, as explained here: https://foso.github.io/Jetpack-Compose-Playground/general/state/

In short, your composable would look like this:

    @Composable
fun NewsStory (){
val clickState = remember { mutableStateOf(0) }
Column (modifier = Modifier.padding(8.dp)) {
        Button(
            onClick = { clickState.value++ }) {
        }
        Text("Clicked: $clickState.value.toString()")
    }
}
user_55137880
Related