Was sind Custom Hooks und wie schreibst du einen?

Question

Accepted Answer

Ein **Custom Hook** ist eine Funktion, deren Name mit `use` beginnt und die andere Hooks aufruft, um **zustandsbehaftete Logik zu verpacken und wiederzuverwenden** — ohne deinen Komponentenbaum zu ändern (im Gegensatz zu HOCs oder 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}

; } ``` ## Wichtige Eigenschaften - Es befolgt die **Rules of Hooks** (Aufruf auf oberster Ebene; nur von Komponenten/Hooks). - **State ist isoliert pro Aufruf.** Zwei Komponenten, die `useFetch` verwenden, erhalten ihren eigenen unabhängigen State — das Teilen des Hooks bedeutet nicht, dass Daten geteilt werden. - Konvention: Benenne ihn `useX` und gib State + Funktionen zurück (oft ein Array oder Objekt). ## Warum es wichtig ist Custom Hooks sind die idiomatische Methode, um Logik (Datenabruf, Formulare, Abos, Media Queries) in modernem React zu teilen, wodurch Komponenten klein und die Logik isoliert testbar bleibt.