State and recomposition

What is state?

State is data that changes and that the UI shows: the number of items in a cart, the text in a search box, whether a switch is on. In declarative UI, you do not change the screen directly; you change the state, and the UI updates itself.

Why a plain var does not work

@Composable
fun BrokenCounter() {
    var count = 0
    Button(onClick = { count++ }) {
        Text("Clicked $count times")      // always shows 0
    }
}

mutableStateOf and remember

@Composable
fun Counter() {
    var count by remember { mutableStateOf(0) }
    Button(onClick = { count++ }) {
        Text("Clicked $count times")
    }
}

• mutableStateOf(0) creates an observable state holder. When its value changes, Compose knows which composables read it.
• remember { } keeps the object across recompositions, so the function running again does not reset it.
• by is a Kotlin property delegate: it lets you write count instead of count.value.

Recomposition

Recomposition is Compose calling your composable functions again with new state to update the UI. Compose is smart: it only re-runs the composables that read the changed state, and skips the rest. Because composables may run often and in any order, they should be fast and free of side effects: do not start network calls or change other variables directly inside a composable body.

rememberSaveable

remember survives recomposition but not configuration changes like rotation, because the activity is recreated. rememberSaveable saves the value in the saved-instance state too, so it survives rotation and even process death. Use it for small UI state like text in a field or the selected tab. Larger or business state belongs in a ViewModel (module 7).

State hoisting

State hoisting means moving state out of a composable to its caller. The composable receives the current value and a function to call when it should change. It becomes stateless: easier to reuse, preview and test, and the screen has a single source of truth.

@Composable
fun QuantityPicker(qty: Int, onQtyChange: (Int) -> Unit) {     // stateless
    Row(verticalAlignment = Alignment.CenterVertically) {
        IconButton(onClick = { if (qty > 1) onQtyChange(qty - 1) }) { Text("-") }
        Text("$qty")
        IconButton(onClick = { onQtyChange(qty + 1) }) { Text("+") }
    }
}

@Composable
fun CartLine() {
    var qty by rememberSaveable { mutableStateOf(1) }            // state lives here
    QuantityPicker(qty = qty, onQtyChange = { qty = it })
    Text("Total: Rs ${qty * 120}")
}

Common mistakes

• Using a plain var or a normal list for UI state: the screen never updates.
• Forgetting remember: the state resets on every recomposition.
• Using remember for state that must survive rotation: use rememberSaveable or a ViewModel.
• Changing a mutable list inside state (list.add) without creating a new list. Use mutableStateListOf or replace the list: items = items + newItem.