Remember, I told you that we have a Counter, and we can create a state there?

@Composable
fun Counter (title: String) {
var count by state {0f}
Button (
text = “$ title: $ count”,
onClick = {count ++}
)
}

State then had key 123, and after we returned, the same state when we update counter. This is because state inside looks like just remember. This is remember from the MutableState function. And the mutableStateOf function is similar to MutableListOf in Kotlin.

@Composable
inline fun state (init: () -> T): MutableState =
remember {mutableStateOf (init ())}
fun mutableStateOf (value: T): MutableState {…}

The idea is that it is in the state function that we remake MutableStateOf, we can understand that it is the same. And if we change the title of the button, the state will remain the same. That is, I can change the title from Mobius to Matvei with counter = 14: the title will change, but counter will remain 14.

The MutableState interface is very simple, inherits from state.

interface MutableState : State {
override var value: T
}
interface State {
val value: T
}

All MutableStateOf does is create a MutableState object. It takes Initial so that we can create it correctly. It’s not just a wrapper that contains a class with , although it looks like that to us.

We create a MutableState instance that allows us to track your reads and then update only those who read. This is not necessary in an ideal world, because in Compose we are able to run through the Gap buffer ourselves and understand what is happening. But for important, interesting cases, this thing allows us to update the read or, in other words, to make scoped observations, when we can understand what happened and in what scope.

Let’s take an example.

Here is our Counter with our generated slot table. We will not create this state here using the state function, but we will transfer it to the parameter sheet. The gap buffer will change.

We will not talk about whether this approach is good or bad. Counter comes and we can change it. If you generated and passed the MutableState, we can figure out that somewhere in the text there is a state.value, we read the value from the MutableState. We read this inside the scope Counter. Let’s remember this, we update only Counter and nothing else.

We have three buttons, they have their own counter and the Increase all button, which will increment all counter. One option is to make MutableState a counter parameter so that we can control everything. We can create an App:

fun App (counterData: Map >) {
Column {
counterData.forEach {(title, counterState) ->
Counter (title, counterState)
}
Button (
text = “Increase All!”,
onClick = {
counterData.forEach {(_, countState) ->
countState.value ++
}
}
)
}
}

After that, I say that we have a Column in Compose, and I create counterData.forEach there. And I give it the title (Mobius, Matvei or Memoization) and counterState to our counter. After that, add a Button, which will update all the counters that we have on click. And we have counters, which work separately, and Increase all, which updates everything.