Nini ni custom hooks na unawezaje kuandika moja?

Question

Accepted Answer

**Custom hook** ni funktion ambayo jina lake linaanza na `use` na inayoita hooks nyingine kupaketi na kurudia kutumia logiki yenye state — bila kubadilisha mti wako wa komponenti (tofauti na HOCs au 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}

; } ``` ## Sifa muhimu - Inafuata **Rules of Hooks** (piga simu katika kiwango cha juu; tu kutoka kwa komponenti/hooks). - **State imetenga kwa kila simu.** Komponenti mbili zinazotumiia `useFetch` kila moja kupokea state yao huru — kushiriki hook *haishangi* data. - Kawaida: iite `useX` na kurudisha state + vitendaji (mara nyingi array au kitu). ## Kwa nini inajali Custom hooks ni njia ya idiomatiki ya kushiriki logiki (kufanya data, fomu, usajili, kipaumbele cha media) katika React ya kisasa, inayoifanya komponenti kubaki ndogo na logiki inayololeweka kwa ujumla.