Kaj so custom hooks in kako jih napišeš?

Question

Accepted Answer

**Custom hook** je funkcija, katere ime se začne z `use` in ki kliče druge hooks, da **pakira in ponovno uporablja logiko s stanjem** — brez spremembe vašega drevesa komponent (za razliko od HOC-ov ali 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}

; } ``` ## Pomembne lastnosti - Sledi **Rules of Hooks** (klic na zgornji ravni; samo iz komponent/hookov). - **Stanje je izolirano na klic.** Dve komponenti, ki uporabljata `useFetch`, dobita vsaka svoje neodvisno stanje — deljenje hooka *ne* pomeni deljenje podatkov. - Konvencija: poimenuj ga `useX` in vrni stanje + funkcije (pogosto polje ali objekt). ## Zakaj je to važno Custom hooki so idiomatski način za deljenje logike (pridobivanje podatkov, obrazci, naročnine, media queries) v sodobnem React-u, pri čemer so komponente majhne in je logika preizkušljiva v izolaciji.