State in Compose (remember, mutableStateOf)

Relax. We'll talk through this in plain words — no textbook voice.

What you'll walk away with

Understand State in Compose (remember, mutableStateOf) without any of the intimidation
Be able to run Android Studio/Compose code yourself
Apply this concept immediately in a real project

Let's think about it for a second

Every time a Compose function is called (recomposition), it redraws the UI — but if you write a local variable like `var count = 0` inside the function, its value resets on every recomposition. Only by using `remember { mutableStateOf(0) }` does Compose keep that value alive across recompositions. Whenever a `mutableStateOf` value changes, Compose automatically redraws just the composables that use that state — State Hoisting is the pattern of not keeping state inside a child composable but instead passing it down from the parent (to make the component reusable).

Let's connect this to a real-world scenario

In a counter app, if you write `var count by remember { mutableStateOf(0) }` and do `count++` on button click, the `Text("$count")` on screen updates automatically and you'll see the number go up. Using State Hoisting, you could write `Counter(count: Int, onIncrement: () -> Unit)` where the state is passed in from the parent, letting the `Counter` composable be reused across different parents.

remember { mutableStateOf(...) } = keeps a value alive across recompositions
When state changes, the composables that use it are automatically redrawn
State Hoisting = the pattern of passing state down from the parent (for component reusability)

Let's look at an example together

kotlin

@Composable
fun Counter() {
    var count by remember { mutableStateOf(0) }

    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        Text(text = "Count: $count", fontSize = 24.sp)
        Button(onClick = { count++ }) {
            Text("Increment")
        }
    }
}

You should see

Clicking the button should show 'Count: 0' → 'Count: 1' → 'Count: 2' updating live on screen.

Try it in 5 minutes

Run the `Counter` composable and click the button 5 times — confirm the count updates live. Then try removing `remember` and see what happens (the value resets on every recomposition).

A quick word of caution

If you use the `by` keyword (property delegate syntax) together with `mutableStateOf`, you need to import `androidx.compose.runtime.getValue` / `setValue` — otherwise you'll hit a compile error.

Easy traps

Using `mutableStateOf` on its own without `remember` — the value will reset on every recomposition
Keeping state local to a deeply nested child composable, making it awkward when a sibling component needs access — the State Hoisting pattern should be used instead

Now try it yourself

Run the `Counter` composable and click the button 5 times — confirm the count updates live. Then try removing `remember` and see what happens (the value resets on every recomposition).

You'll know it worked when: Clicking the button should show 'Count: 0' → 'Count: 1' → 'Count: 2' updating live on screen.