Custom Hook Dasar
Mengekstrak stateful behavior yang berulang ke function bernama use agar component UI tetap fokus pada tampilan.
Tujuan belajar
- Menjelaskan custom hook sebagai cara memakai ulang logic React
- Menamai custom hook dengan awalan use
- Mengembalikan state dan action yang dibutuhkan component
Isi lesson
5 blok- 1.Ulangi behavior, bukan markupBelum selesaiWajib
- 2.`useToggle` mengemas boolean stateBelum selesaiWajib
- 3.Ekstrak saat tanggung jawab mulai berulangBelum selesaiWajib
- 4.Coding practiceBelum selesaiWajib
- 5.RingkasanBelum selesaiWajib
Ulangi behavior, bukan markup
WajibSaat dua component membutuhkan stateful behavior yang sama, kamu tidak perlu menyalin `useState` dan handler ke setiap component. Extract bagian behavior itu ke custom hook. Custom hook adalah function biasa yang memakai Hook React lain dan namanya selalu dimulai dengan `use`.
Custom hook tidak membagi satu state yang sama ke semua pemanggilnya. Setiap component yang memanggil hook mendapat state instance sendiri. Yang dipakai ulang adalah aturan dan action-nya, bukan value state yang sama.
Bagian ini memengaruhi progres lesson.
`useToggle` mengemas boolean state
Wajibimport { useState } from "react";
function useToggle(initialValue = false) {
const [isOn, setIsOn] = useState(initialValue);
function toggle() {
setIsOn((current) => !current);
}
return { isOn, toggle };
}
function HelpPanel() {
const { isOn, toggle } = useToggle();
return <button onClick={toggle}>{isOn ? "Tutup" : "Buka"}</button>;
}`useToggle` menyimpan detail state boolean dan action `toggle`. Component hanya memilih cara menampilkan dan kapan menjalankan action itu.
Bagian ini memengaruhi progres lesson.
Tips
WajibEkstrak saat tanggung jawab mulai berulang
Jangan membuat hook hanya agar semua code terlihat abstrak. Extract saat beberapa component memakai aturan state, event, atau effect yang sama dan nama hook membuat maksudnya lebih jelas. Hook kecil seperti `useToggle` atau `useWindowWidth` sering cukup untuk satu tanggung jawab.
Bagian ini memengaruhi progres lesson.
Coding practice
WajibDibuka di workspace khususEkstrak behavior ke useToggle
Latihan membuat custom hook useToggle yang mengembalikan boolean state dan action toggle.
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- Custom hook memakai ulang logic React, bukan markup UI.
- Nama custom hook dimulai dengan `use`.
- Setiap pemanggil hook tetap mendapat state sendiri.
- Return hook sebaiknya menyatakan state dan action yang diperlukan component.
- Berikutnya, custom hook akan dipakai untuk subscription browser yang membutuhkan cleanup.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: Ulangi behavior, bukan markup.