Jetpack Compose Academy · Lektion

derivedStateOf und snapshotFlow

Berechnen und beobachten Sie abgeleiteten State effizient.

derivedStateOf und snapshotFlow ist eine kostenlose Jetpack Compose Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Jetpack Compose Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Jetpack Compose Academy-Kurs umfasst insgesamt 4 Lektionen.

Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.

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. ⚡

Häufig gestellte Fragen

Ist die Lektion „derivedStateOf und snapshotFlow“ kostenlos?

Ja — der vollständige Text von „derivedStateOf und snapshotFlow“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Jetpack Compose Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Jetpack Compose Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „derivedStateOf und snapshotFlow“?

Berechnen und beobachten Sie abgeleiteten State effizient. Du übst Jetpack Compose Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Jetpack Compose Academy zu starten?

Keine Vorkenntnisse erforderlich. Jetpack Compose Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „derivedStateOf und snapshotFlow“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Jetpack Compose Academy-Lektion Code schreiben und ausführen?

Ja. Jede Jetpack Compose Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Jetpack Compose Academy