0Pricing
Jetpack Compose Academy · Pelajaran

derivedStateOf & snapshotFlow

Hitung dan amati state turunan secara efisien.

derivedStateOf & snapshotFlow adalah pelajaran Jetpack Compose Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Jetpack Compose Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Jetpack Compose Academy mencakup 4 pelajaran total.

Menghitung Nilai dari State

Terkadang sebuah nilai bergantung pada state lain, misalnya tombol yang hanya aktif saat formulir valid. Menghitungnya dengan baik mencegah recomposition yang tidak perlu.

Mengenal derivedStateOf

derivedStateOf membuat state dari suatu perhitungan. Fungsi ini hanya memberi tahu pembaca saat hasil yang dihitung benar-benar berubah, bukan setiap kali input sedikit berubah.

val isValid by remember {
    derivedStateOf { name.isNotBlank() && age > 0 }
}

Menyaring Perubahan yang Tidak Penting

Jika banyak pembacaan state menghasilkan satu nilai boolean, derivedStateOf sering menghitung ulang, tetapi hanya mengeluarkan nilai saat boolean tersebut berubah. UI jadi jauh lebih jarang digambar ulang.

Contoh Pengguliran

Menampilkan tombol untuk menggulir ke atas hanya setelah pengguna melewati item 5 sangat cocok untuk derivedStateOf, karena indeks berubah terus-menerus.

val showButton by remember {
    derivedStateOf { listState.firstVisibleItemIndex > 5 }
}

Selalu Ingat untuk Menggunakannya

Bungkus derivedStateOf dengan remember agar state turunan tetap bertahan saat recomposition. Tanpa remember, Anda akan membuatnya ulang pada setiap penggambaran ulang.

Mengenal snapshotFlow

snapshotFlow mengubah state Compose menjadi Kotlin Flow. Anda mengumpulkannya di dalam efek untuk merespons perubahan state di luar composition.

snapshotFlow { listState.firstVisibleItemIndex }
    .collect { index -> log(index) }

Jalankan di LaunchedEffect

Karena pengumpulan bersifat menangguhkan, Anda menempatkan snapshotFlow di dalam LaunchedEffect. Fungsi ini menjembatani state Compose dengan pekerjaan berbasis coroutine.

LaunchedEffect(listState) {
    snapshotFlow { listState.firstVisibleItemIndex }
        .collect { save(it) }
}

Gabungkan dengan Operator Flow

Karena merupakan Flow sungguhan, Anda dapat merangkai operator seperti distinctUntilChanged atau debounce untuk mengatur seberapa sering Anda merespons.

snapshotFlow { query }
    .debounce(300)
    .collect { search(it) }

derivedStateOf vs snapshotFlow

Gunakan derivedStateOf untuk memberikan nilai hasil perhitungan kepada UI, dan snapshotFlow untuk mengirim perubahan state ke efek samping seperti pencatatan atau penyimpanan.

Hindari Penghitungan Ulang yang Naif

Membaca state pengguliran secara langsung di badan Composable akan memicu recomposition pada setiap bingkai. derivedStateOf membatasi penggambaran ulang hanya saat hasil yang bermakna berubah.

Keduanya Membuat UI Efisien

Bersama-sama, kedua alat ini menjaga Compose tetap cepat: derivedStateOf mengurangi recomposition, sedangkan snapshotFlow memindahkan reaksi keluar dari jalur composition.

Pemeriksaan Singkat

Ingat kembali tujuan yang dioptimalkan oleh masing-masing alat.

Ringkasan: derivedStateOf & snapshotFlow

Luar biasa! derivedStateOf menghitung nilai UI secara efisien dan hanya mengeluarkannya saat benar-benar berubah, sedangkan snapshotFlow mengalirkan state Compose ke coroutine. ⚡

Pertanyaan yang Sering Diajukan

Apakah pelajaran “derivedStateOf & snapshotFlow” gratis?

Ya — teks lengkap “derivedStateOf & snapshotFlow” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Jetpack Compose Academy, upgrade ke CoddyKit PRO. Kursus Jetpack Compose Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “derivedStateOf & snapshotFlow”?

Hitung dan amati state turunan secara efisien. Kamu berlatih Jetpack Compose Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Jetpack Compose Academy?

Tidak diperlukan pengalaman sebelumnya. Jetpack Compose Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “derivedStateOf & snapshotFlow” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Jetpack Compose Academy ini?

Ya. Setiap pelajaran Jetpack Compose Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. LaunchedEffect untuk Coroutine
  2. rememberCoroutineScope untuk Event
  3. DisposableEffect & Pembersihan
  4. derivedStateOf & snapshotFlow
← Kembali ke Jetpack Compose Academy