Kas yra custom hooks ir kaip jį parašyti?

Question

Accepted Answer

A **custom hook** yra funkcija, kurios pavadinimas prasideda `use` ir kuri iškviečia kitus hooks, kad **pakuotų ir pakartotinai panaudotų stateful logiką** — nekeičiant jūsų component medžio (skirtingai nuo HOCs ar 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}

; } ``` ## Svarbios savybės - Jis paklūsta **Rules of Hooks** (iškviečiamas iš pat viršaus; tik iš components/hooks). - **State yra izoliuota per kiekvieną iškviečiamą kartą.** Du komponentai, kurie naudoja `useFetch`, kiekvienas gaus savo nepriklausomą state — hook dalintis *ne* dalintis duomenis. - Konvencija: pavadinkite jį `useX` ir grąžinkite state + funkcijas (dažniausiai masyvą arba objektą). ## Kodėl tai svarbu Custom hooks yra idiomatinis būdas dalintis logika (duomenų gavyba, formos, prenumeratos, medijos užklausos) šiuolaikinėje React-e, laikant komponentus mažus ir logiką testuojamą izoliacijoje.