Browser Subscription Hook
Membuat custom hook kecil yang membaca ukuran browser dan membersihkan event listener resize dengan aman.
Tujuan belajar
- Memasang event listener browser lewat useEffect
- Melepas event listener lewat cleanup
- Mengembalikan data browser dari custom hook kecil
Isi lesson
5 blok- 1.Subscription menghubungkan React dengan browserBelum selesaiWajib
- 2.`useWindowWidth` dengan cleanupBelum selesaiWajib
- 3.Checklist subscription yang amanBelum selesaiWajib
- 4.Coding practiceBelum selesaiWajib
- 5.RingkasanBelum selesaiWajib
Subscription menghubungkan React dengan browser
WajibUkuran window, koneksi online, dan keyboard event berasal dari browser, bukan dari state React. Saat component perlu merespons perubahan itu, component dapat berlangganan ke browser dengan event listener. Karena listener berada di luar React, effect memasang dan cleanup melepasnya.
Custom hook memberi batas yang rapi: component UI tidak perlu tahu detail `addEventListener` dan `removeEventListener`. Ia cukup menerima data seperti `width` lalu menentukan tampilan yang tepat.
Bagian ini memengaruhi progres lesson.
`useWindowWidth` dengan cleanup
Wajibimport { useEffect, useState } from "react";
function useWindowWidth() {
const [width, setWidth] = useState(() => window.innerWidth);
useEffect(() => {
function handleResize() {
setWidth(window.innerWidth);
}
window.addEventListener("resize", handleResize);
return () => {
window.removeEventListener("resize", handleResize);
};
}, []);
return width;
}Hook membaca ukuran awal, memasang satu listener resize, lalu menghapus listener yang sama saat hook tidak lagi dipakai. Handler diberi nama agar pasangan pasang/lepas mudah terlihat.
Bagian ini memengaruhi progres lesson.
Catatan penting
WajibChecklist subscription yang aman
Simpan handler dalam function bernama. Pasang event dengan handler itu. Kembalikan cleanup yang melepas event dengan event name dan handler yang sama. Hindari menaruh `addEventListener` langsung di body component karena ia akan berjalan setiap render.
Bagian ini memengaruhi progres lesson.
Coding practice
WajibDibuka di workspace khususBuat useWindowWidth dengan cleanup
Latihan membuat custom hook yang membaca lebar window dan membersihkan listener resize.
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- Browser event adalah sistem luar React yang cocok disinkronkan lewat effect.
- Event listener harus dipasang dan dilepas dengan handler yang sama.
- Custom hook menyembunyikan detail subscription dari component UI.
- Component pemakai hook bisa fokus pada data yang dikembalikan hook.
- Berikutnya, Uji Kompetensi mengecek keputusan effect, cleanup, dan tanggung jawab custom hook.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: Subscription menghubungkan React dengan browser.