Što su prilagođeni hookovi i kako napišete jedan?

Question

Accepted Answer

**Prilagođeni hook** je funkcija čije se ime počinje s `use` i koja poziva druge hookove da bi **zapakovala i ponovno koristila logiku sa stanjem** — bez mijenjanja vašeg stabla komponenti (za razliku od HOC-a ili render prop-a). ```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}

; } ``` ## Važna svojstva - Slijedi **Rules of Hooks** (pozovi na najvećoj razini; samo iz komponenti/hookova). - **Stanje je izolirano po pozivu.** Dvije komponente koje koriste `useFetch` dobivaju svoje neovisno stanje — dijeljenje hooka *ne* dijeli podatke. - Konvencija: nazovite ga `useX` i vratite stanje + funkcije (često niz ili objekt). ## Zašto je to važno Prilagođeni hookovi su idiomatski način za dijeljenje logike (dohvaćanje podataka, obrasci, pretplate, upiti za medije) u modernom React-u, održavajući komponente male i logiku testabilnom u izolaciji.