Jetpack Compose Academy · درس

‏derivedStateOf وsnapshotFlow

احسب الحالة المشتقة وراقبها بكفاءة

‏derivedStateOf وsnapshotFlow درس مجاني في Jetpack Compose Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Jetpack Compose Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Jetpack Compose Academy 4 دروس في المجموع.

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

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

الأسئلة الشائعة

هل درس «‏derivedStateOf وsnapshotFlow» مجاني؟

نعم — نص درس «‏derivedStateOf وsnapshotFlow» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Jetpack Compose Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Jetpack Compose Academy 4 دروس في المجموع.

ماذا ستتعلم في «‏derivedStateOf وsnapshotFlow»؟

احسب الحالة المشتقة وراقبها بكفاءة تتمرن على Jetpack Compose Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Jetpack Compose Academy؟

لا تُشترط خبرة سابقة. Jetpack Compose Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «‏derivedStateOf وsnapshotFlow»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Jetpack Compose Academy هذا؟

نعم. كل درس في Jetpack Compose Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Jetpack Compose Academy