Czym są custom hooks i jak się je pisze?

Question

Accepted Answer

**Custom hook** to funkcja, której nazwa zaczyna się od `use` i która wywołuje inne hooki, aby **opakować i ponownie wykorzystać logikę stanową** — bez zmiany drzewa komponentów (w przeciwieństwie do HOCs lub 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}

; } ``` ## Ważne właściwości - Przestrzega **Rules of Hooks** (wywoływanie na najwyższym poziomie; tylko z komponentów/hooków). - **Stan jest izolowany dla każdego wywołania.** Dwa komponenty używające `useFetch` mają każdy swój niezależny stan — udostępnienie hooka *nie* oznacza udostępnienia danych. - Konwencja: nazwij go `useX` i zwróć stan + funkcje (często tablicę lub obiekt). ## Dlaczego to ważne Custom hooki to idiomatyczny sposób na udostępnianie logiki (pobieranie danych, formularze, subskrypcje, media queries) w nowoczesnym React, utrzymując komponenty małe i logikę testowalną w izolacji.