Remembering the State in Jetpack Compose

When starting to work with Jetpack Compose (now that it is in beta 🎉) and stateful components, we easily get used to define values based on a mutable state which are also remembered. But there are two independent concepts when we write a line of code like below:

var clicks by remember { mutableStateOf(0) }

• mutableState* family functions return an observable value for Compose. It creates a MutableState that allows Compose to magically react when the contained value changes.
• remember on the other hand makes the computation passed to the lambda execute once (not exactly once, but just during the composition). This is valid not just to avoid a state to recreate/reinitialize when the recomposition happens, but also to “cache” expensive computations.

To get a better understanding of how both functions work together we are going to see what is the result for a set of examples implementing a simple click counter.

Remembering the state

Here we have a remembered state defined under a Surface. The state value is read on a Text contained in a Button:

Surface {
    var clicks by remember { mutableStateOf(0) }
    Button(onClick = { clicks++ }) {
        Text("Clicked $clicks times")
    }
}