Derived State
Menghitung filtered list, count, dan label dari state atau props yang sudah ada tanpa menyimpan salinan data baru.
Tujuan belajar
- Mengenali duplicate state sebagai sumber UI tidak sinkron
- Menghitung data turunan saat render
- Merender filtered list dari sumber data dan filter yang ada
Isi lesson
5 blok- 1.Jangan simpan salinan dari data yang sudah kamu punyaBelum selesaiWajib
- 2.Filter list tanpa visibleLessons stateBelum selesaiWajib
- 3.Effect tidak memperbaiki duplicate stateBelum selesaiWajib
- 4.Coding practiceBelum selesaiWajib
- 5.RingkasanBelum selesaiWajib
Jangan simpan salinan dari data yang sudah kamu punya
WajibDerived state adalah value yang dapat dihitung dari props atau state lain. Contohnya: jumlah lesson selesai, total harga, filtered list, dan label ringkasan. Jika kamu menyimpan value turunan sebagai state terpisah, dua sumber data harus selalu diperbarui bersama. Inilah duplicate state.
Duplicate state mudah terlihat benar pada awalnya, tetapi gagal saat satu update terlupa. Lebih aman menyimpan sumber data asli dan input yang benar-benar berubah, lalu menghitung hasil turunannya setiap render.
Bagian ini memengaruhi progres lesson.
Filter list tanpa visibleLessons state
Wajibconst lessons = [
{ id: "state", title: "State Colocation", required: true },
{ id: "context", title: "Context When Needed", required: false },
];
function LessonSearch() {
const [query, setQuery] = useState("");
const visibleLessons = lessons.filter((lesson) =>
lesson.title.toLowerCase().includes(query.toLowerCase()),
);
return (
<section>
<input value={query} onChange={(event) => setQuery(event.target.value)} />
<p>{visibleLessons.length} lesson ditemukan.</p>
</section>
);
}Hanya `query` yang berubah karena input user. `visibleLessons` selalu dihitung dari `lessons` dan `query`, sehingga hasilnya tidak dapat tertinggal dari filter terbaru.
Bagian ini memengaruhi progres lesson.
Kesalahan umum
WajibEffect tidak memperbaiki duplicate state
Menyimpan `visibleLessons` lalu memperbaruinya lewat `useEffect` hanya menambah satu langkah sinkronisasi. Jika hasil bisa dihitung dari `lessons` dan `query`, hitung langsung di render. Simpan state hanya untuk value yang menjadi sumber perubahan, bukan hasil hitungannya.
Bagian ini memengaruhi progres lesson.
Coding practice
WajibDibuka di workspace khususHitung filtered lesson list saat render
Latihan menghapus salinan list dari state dan menghitung visibleLessons dari data sumber serta query.
Tujuan awal: Fokus di tab TSX.
Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.
Tombol selesai aktif setelah semua validasi wajib lolos.
Ringkasan
Wajib- Derived state adalah hasil hitung dari props atau state yang sudah ada.
- Filtered list, count, dan label ringkasan sering tidak perlu disimpan sebagai state.
- Duplicate state membuat UI berisiko tidak sinkron.
- Hitung value turunan saat render jika tidak ada alasan kuat untuk menyimpannya.
- Berikutnya, kamu akan memakai reducer saat beberapa update state mulai membentuk satu flow terkait.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: Jangan simpan salinan dari data yang sudah kamu punya.