Çfarë janë custom hooks dhe si të shkruash një?

Question

Accepted Answer

Një **custom hook** është një funksion emri i të cilit fillon me `use` dhe që thërret hook-e të tjerë për të **përpakuar dhe rilëshuar logjikën me gjendje** — pa ndryshuar pemën tuaj të komponentëve (ndryshe nga HOC-s ose 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}

; } ``` ## Vetitë e rëndësishme - Ndjek **Rules of Hooks** (thirrje në nivelin e sipërm; vetëm nga komponente/hooks). - **Gjendja është e izoluar për çdo thirrje.** Dy komponentë duke përdorur `useFetch` secila merr gjendjen e vet të pavarur — ndarjen e hook-ut *nuk* nënkupton ndarjen e të dhënave. - Konvencioni: emërtoje atë `useX` dhe kthe gjendjen + funksionet (shpesh një array ose objekt). ## Pse ka rëndësi Custom hooks-et janë mënyra idiomatike për të ndarë logjikën (marrjen e të dhënave, format, abonimet, pyetjet e mediave) në React-in modern, duke mbajtur komponenet të vogla dhe logjikën të testuar në izolim.