Co jsou vlastní hooks a jak je napíšete?

Question

Accepted Answer

**Vlastní hook** je funkce, jejíž název začíná na `use` a která volá další hooks pro **zabalení a opětovné použití stavové logiky** — bez změny vašeho stromu komponent (na rozdíl od HOC nebo 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}

; } ``` ## Důležité vlastnosti - Dodržuje **Pravidla hooks** (volání na nejvyšší úrovni; pouze z komponent/hooks). - **Stav je izolován pro každé volání.** Dvě komponenty používající `useFetch` získají svůj vlastní nezávislý stav — sdílení hook neznamená sdílení dat. - Konvence: pojmenujte to `useX` a vraťte stav + funkce (obvykle pole nebo objekt). ## Proč je to důležité Vlastní hooks jsou idiomatický způsob, jak sdílet logiku (načítání dat, formuláře, odběry, media queries) v moderním React, což udržuje komponenty malé a logiku testovatelnou v izolaci.