What are custom hooks and how do you write one?

Question

Accepted Answer

A **custom hook** is a function whose name starts with `use` and that calls other hooks to **package and reuse stateful logic** — without changing your component tree (unlike HOCs or 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}

; } ``` ## Important properties - It follows the **Rules of Hooks** (call at the top level; only from components/hooks). - **State is isolated per call.** Two components using `useFetch` each get their own independent state — sharing the hook does *not* share data. - Convention: name it `useX` and return state + functions (often an array or object). ## Why it matters Custom hooks are the idiomatic way to share logic (data fetching, forms, subscriptions, media queries) in modern React, keeping components small and the logic testable in isolation.