Hva er custom hooks og hvordan skriver du en?

Question

Accepted Answer

En **custom hook** er en funksjon hvis navn starter med `use` og som kaller andre hooks for å **pakke og gjenbruke stateful logikk** — uten å endre komponenttreet ditt (ulikt HOCs eller 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}

; } ``` ## Viktige egenskaper - Den følger **Rules of Hooks** (kall på øverste nivå; kun fra komponenter/hooks). - **State er isolert per kall.** To komponenter som bruker `useFetch` får hver sin uavhengige state — deling av hooken betyr *ikke* deling av data. - Konvensjon: navngi den `useX` og returner state + funksjoner (ofte en array eller objekt). ## Hvorfor det er viktig Custom hooks er den idiomatiske måten å dele logikk (datahenting, skjemaer, abonnementer, mediaspørringer) i moderne React, og holder komponenter små og logikken testbar i isolasjon.