Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What does Jetpack Compose remember actually do, how does it work under the hood?

Checking out codelab's basic tutorial there is a snippet to increase counter on button when clicked

@Composable
fun MyScreenContent(names: List<String> = listOf("Android", "there")) {
    val counterState = remember { mutableStateOf(0) }

    Column(modifier = Modifier.fillMaxHeight()) {
        Column(modifier = Modifier.weight(1f)) {
            for (name in names) {
                Greeting(name = name)
                Divider(color = Color.Black)
            }
        }
        Counter(
            count = counterState.value,
            updateCount = { newCount ->
                counterState.value = newCount
            }
        )
    }
}


@Composable
fun Counter(count: Int, updateCount: (Int) -> Unit) {
    Button(
        onClick = { updateCount(count + 1) },
        colors = ButtonConstants.defaultButtonColors(
            backgroundColor = if (count > 5) Color.Green else Color.White
        )
    ) {
        Text("I've been clicked $count times")
    }
}

It is clear that remember { mutableStateOf(0) } stores the state/value. My question is what remember does under the hood. Using var count = remember { 0 } or mutableStateOf(0) without remember does not increase the value.

fun MyScreenContent(names: List<String> = listOf("Android", "there")) {
   
    var count = remember { 0 }

    Column(modifier = Modifier.fillMaxHeight()) {
        Column(modifier = Modifier.weight(1f)) {
            for (name in names) {
                Greeting(name = name)
                Divider(color = Color.Black)
            }
        }
        Counter(
            count = count,
            updateCount = { newCount ->
                count = newCount
            }
        )
    }
}

Snippet above does not update the value printed on Text, does remember only work with MutableState?

like image 925
Thracian Avatar asked Dec 19 '20 08:12

Thracian


People also ask

How does remember work jetpack compose?

remember can be used to store both mutable and immutable objects. Note: remember stores objects in the Composition, and forgets the object when the composable that called remember is removed from the Composition.

What does @composable annotation do?

The function is annotated with the @Composable annotation. All Composable functions must have this annotation; this annotation informs the Compose compiler that this function is intended to convert data into UI. The function takes in data.

How do you use ViewModel in compose?

Connecting a ViewModel state to an activityThe viewModel() function is provided by the Compose view model lifecycle library which needs to be added to the build dependencies of a project when working with view models as follows: You are reading a sample chapter from Jetpack Compose Essentials.


1 Answers

remember - allows you to remember state from previous recompose invocation and just this. So if you for instance randomize color at initial run. The randomized color will going to be calculated once and reused whenever re-compose is necessary.

so ... remember = store value just in case recompose will be called.

Now the second thing is knowing when re-compose should be actually triggered. and there mutable states comes to help.

mutablestate = store the value AND in case i update value trigger recompose for all elements using this data.

like image 155
Daber Avatar answered Sep 28 '22 03:09

Daber