Apa itu custom hooks dan bagaimana cara menulisnya?

Question

Accepted Answer

Sebuah **custom hook** adalah fungsi yang namanya dimulai dengan `use` dan memanggil hook lain untuk **mengemas dan menggunakan kembali logika stateful** — tanpa mengubah pohon komponen Anda (tidak seperti HOC atau render props). ```jsx // extract "fetch + loading + error" logic once, reuse everywhere function useFetch(url) { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const ctrl = new AbortController(); setLoading(true); fetch(url, { signal: ctrl.signal }) .then(r => r.json()) .then(setData) .catch(e => { if (e.name !== "AbortError") setError(e); }) .finally(() => setLoading(false)); return () => ctrl.abort(); }, [url]); return { data, loading, error }; } // usage — the component stays declarative: function Profile({ id }) { const { data, loading, error } = useFetch(`/api/users/${id}`); if (loading) return ; return

{data.name}

; } ``` ## Properti penting - Mengikuti **Rules of Hooks** (panggil di tingkat atas; hanya dari komponen/hook). - **Status terisolasi per panggilan.** Dua komponen yang menggunakan `useFetch` masing-masing mendapatkan status independen mereka sendiri — berbagi hook *tidak* membagikan data. - Konvensi: beri nama `useX` dan kembalikan status + fungsi (sering kali array atau objek). ## Mengapa ini penting Custom hooks adalah cara idiomatik untuk berbagi logika (pengambilan data, formulir, langganan, kueri media) di React modern, menjaga komponen tetap kecil dan logika dapat diuji secara terisolasi.