Menene custom hooks kuma ta yaya ka rubuta daya?

Question

Accepted Answer

A **custom hook** aiki ne wanda sunansa ya fara da `use` kuma wanda ke karanta sauran hooks don **haɗa da sake amfani da logicin da ke da halaye** — ba tare da canja da bishiyar abin babbaka (ba kamar HOCs ko 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}

; } ``` ## Muhimman halayen - Ya bin **Rules of Hooks** (kira a matakin sama; daga abubuwan kasa/hooks kawai). - **Halaye sune suntali a kada kira.** Abubuwa biyu da ke amfani da `useFetch` kowannensu ya samu halayensa na mai zaman kansa — bambanta da hook ba ya bambanta da bayani. - Habi: sanya masa sunansa `useX` kuma dawo halaye + ayyuka (sau da yawa tsari ko jigon). ## Me yasa ya dace Custom hooks shine jiya ta idiomatic don bambanta da logici (bulattu bayani, fomu, jiyya, bubugan watsa-jita) a sabon React, yana ajiya abubuwan kasa kadan kuma logicin za a iya gwada shi daban.