Lesson 20 — Custom hooks

Write your own hook

A custom hook is a normal function whose name starts with use and that calls other hooks inside. It packages stateful logic so any component can reuse it. Each component that calls the hook gets its own copy of the state.

function useCounter(start) {
  const [n, setN] = useState(start);
  return [n, () => setN((x) => x + 1)];
}

Why it matters: toggles, form fields and data loading become one-line hooks instead of repeated code.