What are custom hooks and how do you write one?

Question

IT Interview Practice · 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.

Important properties

Why it matters

Related questions