Kapan Perlu `useEffect`?
Membedakan pekerjaan yang cukup dihitung saat render dari pekerjaan yang perlu menyinkronkan React dengan sistem di luar React.
Tujuan belajar
- Menjelaskan tujuan useEffect secara sederhana
- Membedakan derived value dari synchronization dengan sistem luar
- Memilih untuk tidak memakai effect saat perhitungan cukup dilakukan saat render
Isi lesson
5 blok- 1.Effect bukan tempat untuk semua kode setelah renderBelum selesaiWajib
- 2.Hitung saat render, sinkronkan dengan effectBelum selesaiWajib
- 3.Tanya dua hal sebelum menulis effectBelum selesaiWajib
- 4.Cek pemahamanBelum selesaiWajib
- 5.RingkasanBelum selesaiWajib
Effect bukan tempat untuk semua kode setelah render
Wajib`useEffect` dipakai saat component perlu menyinkronkan diri dengan sesuatu di luar React. Contohnya: memasang event listener browser, menjalankan timer, mengubah judul dokumen, atau terhubung ke API browser. Effect memberi React tempat untuk memulai dan menghentikan hubungan itu.
Tidak semua perubahan UI membutuhkan effect. Jika sebuah value bisa dihitung dari props atau state yang sudah ada, hitung saja saat render. Ini menjaga sumber data tetap sedikit dan membuat UI lebih mudah diikuti.
Bagian ini memengaruhi progres lesson.
Hitung saat render, sinkronkan dengan effect
Wajibimport { useEffect, useState } from "react";
function LessonSummary({ lessons }: { lessons: string[] }) {
const totalLessons = lessons.length;
useEffect(() => {
document.title = "Daftar lesson";
}, []);
return <p>Total lesson: {totalLessons}</p>;
}`totalLessons` berasal langsung dari props, jadi cukup dihitung saat render. Sebaliknya, `document.title` berada di luar React. Effect dipakai untuk menyinkronkan judul dokumen dengan component.
Bagian ini memengaruhi progres lesson.
Catatan penting
WajibTanya dua hal sebelum menulis effect
Pertama, apakah pekerjaan ini menyentuh sesuatu di luar React, seperti browser API, timer, subscription, atau library eksternal? Jika ya, effect mungkin diperlukan. Kedua, apakah value ini bisa dihitung dari props dan state yang sudah ada? Jika ya, jangan simpan atau hitung ulang lewat effect.
Bagian ini memengaruhi progres lesson.
Cek pemahaman
WajibJawab duluCek pemahaman singkat
Sebuah component menampilkan jumlah item dari `items.length`. Pilihan yang paling tepat adalah...
Progres lesson naik setelah jawaban benar.
Ringkasan
Wajib- Effect menyinkronkan component dengan sistem di luar React.
- Nilai yang bisa dihitung dari props atau state sebaiknya dihitung saat render.
- Browser API, timer, dan event listener adalah contoh alasan memakai effect.
- Memilih untuk tidak memakai effect juga merupakan keputusan desain yang baik.
- Berikutnya, kamu akan melihat bagaimana dependency dan cleanup menjaga effect tetap aman.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: Effect bukan tempat untuk semua kode setelah render.