derivedStateOf & snapshotFlow
Compute and observe derived state efficiently.
derivedStateOf & snapshotFlow is a free Jetpack Compose Academy lesson on CoddyKit — lesson 4 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 Jetpack Compose Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Computing Values from State
Sometimes a value depends on other state, like a button enabled only when a form is valid. Computing it well avoids wasteful recomposition.
Meet derivedStateOf
A derivedStateOf creates state from a calculation. It only notifies readers when the computed result actually changes, not on every input tweak.
val isValid by remember {
derivedStateOf { name.isNotBlank() && age > 0 }
}It Filters Out Noise
If many state reads feed one boolean, derivedStateOf recomputes often but emits only when the boolean flips. The UI redraws far less.
A Scroll Example
Showing a scroll-to-top button only when scrolled past item 5 is perfect for derivedStateOf, since the index changes constantly.
val showButton by remember {
derivedStateOf { listState.firstVisibleItemIndex > 5 }
}Always Remember It
Wrap derivedStateOf in remember so the derived state survives recomposition. Without remember you would rebuild it every redraw.
Meet snapshotFlow
A snapshotFlow turns Compose state into a Kotlin Flow. You collect it inside an effect to react to state changes outside composition.
snapshotFlow { listState.firstVisibleItemIndex }
.collect { index -> log(index) }Run It in LaunchedEffect
Because collecting is suspending, you place a snapshotFlow inside a LaunchedEffect. It bridges Compose state into coroutine-based work.
LaunchedEffect(listState) {
snapshotFlow { listState.firstVisibleItemIndex }
.collect { save(it) }
}Combine with Flow Operators
Since it is a real Flow, you can chain operators like distinctUntilChanged or debounce to control how often you react.
snapshotFlow { query }
.debounce(300)
.collect { search(it) }derivedStateOf vs snapshotFlow
Use derivedStateOf to feed the UI a computed value, and snapshotFlow to push state changes into side effects like logging or saving.
Avoid Naive Recomputation
Reading scroll state directly in the body recomposes every frame. derivedStateOf caps the redraws to when the meaningful result changes.
Both Make UIs Efficient
Together these tools keep Compose fast: derivedStateOf shrinks recomposition, and snapshotFlow moves reactions off the composition path.
Quick Check
Recall what each tool is optimized for.
Recap: derivedStateOf & snapshotFlow
Awesome! derivedStateOf computes efficient UI values that emit only on real change, while snapshotFlow streams Compose state into coroutines. ⚡
Frequently asked questions
Is the “derivedStateOf & snapshotFlow” lesson free?
Yes — the full text of “derivedStateOf & snapshotFlow” is free to read here on the web, and the Jetpack Compose 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 Jetpack Compose Academy course, upgrade to CoddyKit PRO.
What will I learn in “derivedStateOf & snapshotFlow”?
Compute and observe derived state efficiently. You practise Jetpack Compose 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 Jetpack Compose Academy?
No prior experience is required. Jetpack Compose Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “derivedStateOf & snapshotFlow” 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 Jetpack Compose Academy lesson?
Yes. Every Jetpack Compose 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
- LaunchedEffect for Coroutines
- rememberCoroutineScope for Events
- DisposableEffect & Cleanup
- derivedStateOf & snapshotFlow