State & Recomposition in Shared UI
Drive Compose from your shared StateFlow.
State & Recomposition in Shared UI is a free Kotlin Multiplatform Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Kotlin Multiplatform Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
UI Is a Function of State
In Compose your screen is drawn from state. When the state changes, Compose redraws only the parts that depend on it. You never mutate views by hand.
Recomposition Explained
That automatic redraw is called recomposition. Compose re-runs the affected composables with the new values and updates the screen for you.
Remember Local State
For state owned by a composable, use remember with mutableStateOf so the value survives recomposition instead of resetting every frame.
val count = remember { mutableStateOf(0) }Read and Write State
Wrap the value in by to read and write it like a normal variable. Reading it subscribes the composable, so writing triggers a redraw.
var count by remember { mutableStateOf(0) }
Button(onClick = { count++ }) {
Text("Count: " + count)
}Hoist State Upward
Move state to the lowest common parent and pass values down. This hoisting keeps child composables stateless, reusable and easy to test.
@Composable
fun Counter(value: Int, onInc: () -> Unit) {
Button(onClick = onInc) { Text("" + value) }
}State Lives in Shared Code
Your real source of truth is the shared layer. A cross-platform StateFlow holds screen state once, far from any platform UI framework.
val uiState: StateFlow<ScreenState> = _stateCollect StateFlow in Compose
Bridge that flow into Compose with collectAsState. The composable observes it and recomposes whenever the shared state emits a new value.
val state by viewModel.uiState.collectAsState()
Text(state.title)One Source of Truth
Because state flows from shared code into Compose, Android and iOS render the exact same screen from a single source of truth. No drift.
Avoid Side Effects in Composables
A composable can run many times, so never do work like network calls directly in its body. Keep it a pure description and push effects elsewhere.
LaunchedEffect for Side Work
When you must start a coroutine tied to the UI, use LaunchedEffect. It runs once per key and cancels automatically when the composable leaves.
LaunchedEffect(Unit) {
viewModel.load()
}Derived and Stable State
Compute values from existing state with derivedStateOf so they recalculate only when their inputs change, keeping recomposition cheap.
Quick Check
What keeps a value across recompositions?
Recap: State Drives the UI
You learned that state drives recomposition, how to remember and hoist it, and how shared StateFlow feeds Compose so both apps render one truth. 🔁
Frequently asked questions
Is the “State & Recomposition in Shared UI” lesson free?
Yes — the full text of “State & Recomposition in Shared UI” is free to read here on the web, and the Kotlin Multiplatform Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Kotlin Multiplatform Academy course, upgrade to CoddyKit PRO.
What will I learn in “State & Recomposition in Shared UI”?
Drive Compose from your shared StateFlow. You practise Kotlin Multiplatform Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Kotlin Multiplatform Academy?
No prior experience is required. Kotlin Multiplatform Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “State & Recomposition in Shared UI” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Kotlin Multiplatform Academy lesson?
Yes. Every Kotlin Multiplatform Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Enable Compose Multiplatform
- Layouts, Modifiers & Theming
- State & Recomposition in Shared UI
- Host Shared UI on iOS & Desktop