Normal Variable vs remember vs remember mutabableStateOf Comparisons
Tags: android, kotlin, beginners, jetpackcompose
Published: 2022-10-28 23:00:00

**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`

```kotlin
// normal variable 
var countNormal = getInitValue()
// variable with rememer
var countRemember = remember { getInitValue() }
// variable with remember mutableStateOf
var countRememberMutableState by remember { mutableStateOf(getInitValue()) }
```
`getInitValue()` is used to demonstrate whether it gets called or executed during recomposition.

```kotlin
fun getInitValue(): Int {
    Log.d("RememberExample", "getInitValue() is called!")
    return 0
}
```

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. When`countRemember` 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 `MutableState`object 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.

```kotlin
@Composable
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 = {
            ++countNormal
        }) { Text(text = "++countWithoutRemember") }

        Button(onClick = {
            ++countRemember

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

        Button(onClick = {
            ++countRememberMutableState
        }) { Text(text = "++countWithRememberMutableState.value") }
    }
}
```

## Summary
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](https://github.com/vinchamp77/Demo_UnderstandComposeConcept) 
 
---

*Originally published at [https://vtsen.hashnode.dev](https://vtsen.hashnode.dev/normal-variable-vs-remember-vs-remember-mutabablestateof-comparisons)*.