Derived Display
Menghitung tampilan dari state yang sudah ada agar state tidak perlu diduplikasi.
Tujuan belajar
- Menjelaskan derived display sebagai nilai hasil hitung dari state/data
- Menghindari duplicate state yang tidak perlu
- Menampilkan count, filter, dan summary dari state yang ada
Isi lesson
5 blok- 1.Tidak semua value perlu menjadi stateBelum selesaiWajib
- 2.Filter dan count dari state yang samaBelum selesaiWajib
- 3.Simpan sumbernya, hitung tampilannyaBelum selesaiWajib
- 4.Coding practiceBelum selesaiWajib
- 5.RingkasanBelum selesaiWajib
Tidak semua value perlu menjadi state
WajibSaat UI makin interaktif, mudah tergoda menyimpan semua hal sebagai state: query, list yang sudah difilter, jumlah item, dan summary text. Padahal sebagian value bisa dihitung dari state yang sudah ada.
Derived display adalah value tampilan yang dihitung saat render. Jika value bisa dihitung dari state atau props yang sudah tersedia, biasanya tidak perlu disimpan sebagai state terpisah.
Bagian ini memengaruhi progres lesson.
Filter dan count dari state yang sama
Wajibimport { useState } from "react";
const lessons = [
{ id: "state", title: "useState Dasar", completed: true },
{ id: "events", title: "Event Handling", completed: false },
];
function LessonSummary() {
const [query, setQuery] = useState("");
const visibleLessons = lessons.filter((lesson) =>
lesson.title.toLowerCase().includes(query.toLowerCase()),
);
const completedCount = visibleLessons.filter((lesson) => lesson.completed).length;
return <p>{completedCount} dari {visibleLessons.length} lesson selesai.</p>;
}`visibleLessons` dan `completedCount` dihitung dari `query` dan `lessons`. Keduanya tidak perlu state sendiri.
Bagian ini memengaruhi progres lesson.
Tips
WajibSimpan sumbernya, hitung tampilannya
Jika sebuah value bisa dihitung dari state lain tanpa efek samping, hitung saja saat render. Simpan state untuk input user, pilihan aktif, data yang berubah, atau status UI yang memang tidak bisa diturunkan dari value lain.
Bagian ini memengaruhi progres lesson.
Coding practice
WajibDibuka di workspace khususHitung display dari state yang ada
Latihan membuat filtered list, count, dan summary text sebagai derived display.
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 display dihitung dari state atau props yang sudah ada.
- Tidak semua nilai tampilan perlu disimpan sebagai state.
- Duplicate state bisa membuat UI tidak sinkron.
- Filter, count, dan summary text sering bisa dihitung saat render.
- Berikutnya, Uji Kompetensi mengecek state, events, conditional rendering, lists, keys, dan derived display.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: Tidak semua value perlu menjadi state.