Lesson 20 — Custom toggle hook

Your own hook

A custom hook is a function whose name starts with use and that calls other hooks inside. It lets several components share the same logic. useToggle keeps a boolean and returns it together with a function that flips it.

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

setN((x) => x + 1) uses the previous value, which is the safe way to update from the old one.

Note: Next.js pages are React components, so this preview runs your code with plain React in the browser. Next.js-only features (the file router, server rendering, data fetching on the server) are not running here — where a lesson needs them, it shows a small simulation instead.

Why it matters: clean components and logic you can reuse and test on its own.