Uji Kompetensi Custom Hooks and Effects
Checkpoint kesiapan memilih useEffect dengan tepat, membersihkan subscription, dan menjelaskan tanggung jawab custom hook.
Yang dicek
- Mengecek keputusan kapan useEffect diperlukan
- Menerapkan cleanup pada browser event subscription
- Menjelaskan tanggung jawab custom hook secara ringkas dan tepat
Isi lesson
6 blok- 1.Checkpoint: behavior React yang terorganisasiBelum selesaiWajib
- 2.QuizBelum selesaiWajib
- 3.Coding practiceBelum selesaiWajib
- 4.Writing practiceBelum selesaiWajib
- 5.Baca docs React dengan tujuan yang jelasBelum selesaiWajib
- 6.RingkasanBelum selesaiWajib
Checkpoint: behavior React yang terorganisasi
WajibUji Kompetensi ini menggabungkan keputusan effect, dependency, cleanup, dan custom hook. Kamu akan menyelesaikan subscription browser kecil, lalu menjelaskan alasan hook tersebut ada.
Kamu belum perlu memakai data fetching, caching, React Router, context, reducer, atau library state. Fokusnya adalah satu behavior yang jelas: membaca data browser, menyinkronkannya dengan React, dan membereskan subscription saat selesai.
Bagian ini memengaruhi progres lesson.
Quiz
WajibUji Kompetensi Custom Hooks and Effects
Jawab pertanyaan satu per satu. Kamu bisa ulang quiz jika belum mencapai target lulus.
Target lulus
70/100
Skor terbaik
0/100
Status
Belum dikerjakan
Blok ini wajib untuk menyelesaikan lesson. Progres quiz naik setelah skor mencapai target lulus.
Pertanyaan 1 dari 5
Target lulus: 70
Kapan useEffect paling tepat digunakan?
Coding practice
WajibDibuka di workspace khususBangun window width hook checkpoint
Checkpoint membuat custom hook browser subscription yang mengembalikan width dan memasang cleanup dengan benar.
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.
Writing practice
WajibLatihan menulis
Jelaskan custom hook `useWindowWidth` yang kamu buat dengan format berikut: - Sistem luar React yang dipakai: - Data yang dikembalikan hook: - Mengapa useEffect diperlukan: - Cleanup yang dilakukan: - Hal yang sengaja tidak dimasukkan ke hook: Tulis dengan bahasa teknis yang ringkas. Fokus pada tanggung jawab hook, bukan menjelaskan semua syntax React.
Tulis draft dulu sebelum menandai writing practice selesai.
0/260 karakter
Checklist panduan
Checklist ini hanya panduan. Kamu tidak harus mencentang semuanya.
Documentation Bridge
WajibBaca docs React dengan tujuan yang jelas
Gunakan docs resmi untuk menguatkan keputusan effect dan cleanup, bukan untuk menghafal setiap API sekaligus.
React
Synchronizing with Effects
Fokus baca
- kapan React perlu disinkronkan dengan sistem luar
- mengapa effect berjalan setelah render
- contoh effect yang punya cleanup
Abaikan dulu
- integrasi library eksternal yang kompleks
- contoh data fetching yang lebih besar
React
You Might Not Need an Effect
Fokus baca
- perhitungan yang cukup dilakukan saat render
- cara menghindari duplicate state
- tanda bahwa effect dipakai terlalu cepat
Abaikan dulu
- optimasi performa lanjutan
React
Reusing Logic with Custom Hooks
Fokus baca
- nama custom hook dimulai dengan use
- hook memakai ulang logic, bukan satu state global
- cara menentukan return value hook
Abaikan dulu
- custom hook library pihak ketiga
- generic TypeScript hook yang kompleks
MDN Web Docs
EventTarget: addEventListener()
Fokus baca
- event name resize
- function handler yang dipasang ke browser
- hubungan handler dengan removeEventListener
Abaikan dulu
- opsi listener tingkat lanjut
Aksi setelah membaca
Di Local React App kamu, pilih satu behavior yang berulang. Tulis satu kalimat tentang apakah behavior itu cukup dihitung saat render, perlu effect, atau layak diekstrak menjadi custom hook.
Bagian ini memengaruhi progres lesson.
Ringkasan
Wajib- useEffect dipakai untuk sinkronisasi dengan sistem di luar React, bukan untuk semua perhitungan.
- Dependency dan cleanup menjaga effect tetap sesuai lifecycle component.
- Timer dan browser listener perlu dibersihkan saat tidak lagi dipakai.
- Custom hook mengemas satu behavior reusable dengan tanggung jawab yang jelas.
- Kamu siap masuk ke State Strategy untuk memilih lokasi dan bentuk state yang paling tepat.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian wajib checkpoint ini
Lanjutkan blok wajib berikutnya: Checkpoint: behavior React yang terorganisasi.