DEV Community

Cover image for Normal Variable vs remember vs remember mutabableStateOf Comparisons
Vincent Tsen
Vincent Tsen

Posted on • Updated on • Originally published at


Normal Variable vs remember vs remember mutabableStateOf Comparisons

What is remember in Jetpack Compose? When and why do we want to use remember in a composable function?

In composable function, you can declare variables in the following ways:

  • Normal variable
  • Variable with remember
  • Variable with remember mutableStateOf
// normal variable 
var countNormal = getInitValue()
// variable with rememer
var countRemember = remember { getInitValue() }
// variable with remember mutableStateOf
var countRememberMutableState by remember { mutableStateOf(getInitValue()) }
Enter fullscreen mode Exit fullscreen mode

getInitValue() is used to demonstrate whether it gets called or executed during recomposition.

fun getInitValue(): Int {
    Log.d("RememberExample", "getInitValue() is called!")
    return 0
Enter fullscreen mode Exit fullscreen mode

What exactly are the differences?

Normal Variable

If you make a change to countNormal, the variable is updated. However, it won't trigger recomposition. If there is recomposition occurs (triggered by others), this whole line var countNormal = getInitValue() is executed.

In other words, getInitValue() is called again and countNormal is reset back to 0. So countNormal is always 0 during recomposition.

remember Variable

It is similar to normal variable above. WhencountRemember is updated, it won't trigger recomposition. The difference is, during recomposition (triggered by others), it won't execute this whole line var countRemember = remember { getInitValue() }. Instead, it gets the cache version of getInitValue().

In other words, getInitValue() will NOT be called. The cached value is assigned to countRemember variable. Thus, this variable is always reset back to 0 too during recomposition.

remember mutableStateOf Variable

When countRememberMutableState is updated, not only this variable is updated, it also triggers the recomposition IF there are listeners (it is being used somewhere). Similar to remember variable above, it gets the cached version of MutableState and it won't call the mutableStateOf() again.

Since this cached version of MutableStateobject has already been updated, the value won't be 0 anymore. In other words, countRememberMutableState has the updated value during recomposition.

Code Example

This is a composable function example to demonstrate what I explained above.

fun RememberExample() {
    var countNormal = getInitValue()
    var countRemember = remember { getInitValue() }
    var countRememberMutableState by remember { mutableStateOf(getInitValue()) }

    Column {
        Text(text = "countNormal: $countNormal")
        Text(text = "countRemember: $countRemember")
        Text(text = "countRememberMutableState: ${countRememberMutableState}")

        Button(onClick = {
        }) { Text(text = "++countWithoutRemember") }

        Button(onClick = {

        }) { Text(text = "++countWithRemember") }

        Button(onClick = {
        }) { Text(text = "++countWithRememberMutableState.value") }
Enter fullscreen mode Exit fullscreen mode


Here is the summary when we should use remember in my opinion.

normal variable remember variable remember mutableStateOf variable
Use this if you don't need to cache the variable Use this if your variable computation is expensive, thus you cache it Use this if you want to cache the created MutableState object which also allows you to trigger recomposition

Source Code

GitHub Repository: Demo_UnderstandComposeConcept

Originally published at

Top comments (0)

An Animated Guide to Node.js Event Loop

Node.js doesn’t stop from running other operations because of Libuv, a C++ library responsible for the event loop and asynchronously handling tasks such as network requests, DNS resolution, file system operations, data encryption, etc.

What happens under the hood when Node.js works on tasks such as database queries? We will explore it by following this piece of code step by step.