Cleanup dan Dependency Array
Memahami kapan effect dijalankan ulang, mengapa cleanup diperlukan, dan cara memperbaiki timer sederhana agar tidak menumpuk.
Tujuan belajar
- Menjelaskan fungsi dependency array
- Menjelaskan kapan cleanup dijalankan
- Memperbaiki timer agar memakai cleanup dan functional state update
Isi lesson
5 blok- 1.Effect punya siklus hidup sendiriBelum selesaiWajib
- 2.Pasang timer, lalu bersihkan timerBelum selesaiWajib
- 3.Jangan biarkan timer dan listener tertinggalBelum selesaiWajib
- 4.Coding practiceBelum selesaiWajib
- 5.RingkasanBelum selesaiWajib
Effect punya siklus hidup sendiri
WajibSetelah React merender component, effect dapat berjalan untuk memulai sinkronisasi. Sebelum effect lama diganti karena dependency berubah, React menjalankan cleanup jika kamu mengembalikannya dari effect. Cleanup juga berjalan saat component dilepas dari halaman.
Dependency array memberi tahu React value reaktif mana yang dipakai effect. Array kosong `[]` berarti effect ini tidak membaca state atau props dari component dan cukup dipasang saat component mulai. Jika effect membaca sebuah value, value itu harus dipertimbangkan sebagai dependency atau logikanya perlu disusun ulang.
Bagian ini memengaruhi progres lesson.
Pasang timer, lalu bersihkan timer
WajibuseEffect(() => {
const timerId = window.setInterval(() => {
setSeconds((current) => current + 1);
}, 1000);
return () => {
window.clearInterval(timerId);
};
}, []);Effect memasang satu timer. Functional update membaca value terbaru tanpa membuat effect bergantung pada `seconds`. Cleanup menghentikan timer saat component tidak lagi memakainya.
Bagian ini memengaruhi progres lesson.
Kesalahan umum
WajibJangan biarkan timer dan listener tertinggal
Tanpa cleanup, timer atau event listener bisa tetap aktif setelah component berganti. Gejalanya bisa berupa callback berjalan ganda, memory leak, atau UI yang berubah dari sumber lama. Setiap effect yang memasang sesuatu biasanya perlu memikirkan cara melepasnya.
Bagian ini memengaruhi progres lesson.
Coding practice
WajibDibuka di workspace khususPerbaiki timer React dengan cleanup
Latihan memperbaiki effect timer agar memakai functional update, dependency array yang tepat, dan cleanup.
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- Dependency array menjelaskan kapan effect perlu disinkronkan ulang.
- Cleanup berjalan sebelum effect lama diganti dan saat component dilepas.
- Timer dan event listener perlu dibersihkan ketika tidak dipakai lagi.
- Functional state update membantu callback timer membaca value terbaru.
- Berikutnya, kamu akan memindahkan behavior berulang ke custom hook.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: Effect punya siklus hidup sendiri.