Wat zijn custom hooks en hoe schrijf je er een?

Question

Accepted Answer

A **custom hook** is een functie waarvan de naam begint met `use` en die andere hooks aanroept om **stateful logic in te pakken en opnieuw te gebruiken** — zonder je component tree te veranderen (in tegenstelling tot HOCs of 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}

; } ``` ## Belangrijke eigenschappen - Het volgt de **Rules of Hooks** (aanroep op het hoogste niveau; alleen vanuit components/hooks). - **State is geïsoleerd per aanroep.** Twee componenten die `useFetch` gebruiken, krijgen elk hun eigen onafhankelijke state — het delen van de hook deelt *niet* de gegevens. - Conventie: noem het `useX` en return state + functies (vaak een array of object). ## Waarom het belangrijk is Custom hooks zijn de idiomatische manier om logica (data fetching, formulieren, abonnementen, mediaquery's) te delen in modern React, waarbij componenten klein blijven en de logica geïsoleerd testbaar is.