Level 2

State & Interactivity

Reactive State Management

Reactivity. When `state` changes, the UI automatically "recomposes" (redraws). We use `remember` to keep state across redraws.

📚 Explanation

`remember` preserves state across recompositions (when the function is called again). `mutableStateOf` creates an observable state that triggers recomposition when changed. This is Compose's reactive system.

Note: Code execution is not available for Android/Kotlin in the browser. Use Android Studio to run and test the app.

kotlin

import androidx.compose.runtime.*
import androidx.compose.material3.*

@Composable
fun CounterScreen() {
    // "remember" preserves the value during recomposition
    // "mutableStateOf" makes it observable (triggering UI updates)
    var count by remember { mutableIntStateOf(0) }

    Button(onClick = { count++ }) {
        Text(text = "Clicked $count times")
    }
}

Back to Android Levels Back to Developer Hub