Custom hooks and the rules of hooks

When two components repeat the same useState + useEffect dance — track the window width, read and write localStorage, debounce a value — move it into a function whose name starts with use:

function useOnlineStatus() {
  const [online, setOnline] = useState(true);
  useEffect(() => {
    const on = () => setOnline(true);
    const off = () => setOnline(false);
    window.addEventListener("online", on);
    window.addEventListener("offline", off);
    return () => {
      window.removeEventListener("online", on);
      window.removeEventListener("offline", off);
    };
  }, []);
  return online;
}

That is all a custom hook is: a function that calls other hooks. The use prefix is a convention that tells readers — and the lint rules — that the function follows the rules of hooks. A helper that calls no hooks should not start with use.

Hooks share logic, not state

Calling a custom hook is the same as pasting its body into the component. Each component that calls useCounter() gets its own useState inside it, so their values are independent. To share one value between components, lift the state up or put it in context.

How React knows which state is which

useState(0) carries no name. React keeps, for each component instance, a list of hook slots, and assigns them by the order of the calls: the first hook call during a render gets slot 0, the second slot 1, and so on. The model below is that mechanism in a dozen lines:

1// One slot list per component instance; a cursor walks it on each render.2function createInstance(component) {3  const slots = [];4  let cursor = 0;5  const useState = (initial) => {6    const i = cursor++;7    if (!(i in slots)) slots[i] = initial;8    const set = (v) => { slots[i] = v; };9    return [slots[i], set];10  };11  return {12    render(props) {13      cursor = 0;14      return component(props, { useState });15    },16  };17}18 19// A custom hook: just a function that calls hooks.20function useCounter(hooks, start) {21  const [count, setCount] = hooks.useState(start);22  return { count, increment: () => setCount(count + 1) };23}24 25function Counter(props, hooks) {26  return useCounter(hooks, props.start);27}28 29export function run() {30  const a = createInstance(Counter);31  const b = createInstance(Counter);32  a.render({ start: 0 }).increment();33  a.render({ start: 0 }).increment();34  b.render({ start: 100 }).increment();35  return { a: a.render({ start: 0 }).count, b: b.render({ start: 100 }).count };36}

Both counters called the same hook, yet each component instance had its own slot list, so their counts stayed separate.

The rules of hooks

Because slots are matched by position, the sequence of hook calls must be identical on every render of a component:

1. Call hooks only at the top level — never inside a condition, loop, nested function, or after an early return.
2. Call hooks only from components and other hooks, not from ordinary functions or event handlers.

If a condition skips a hook, every hook after it reads the wrong slot:

1function createInstance(component) {2  const slots = [];3  let cursor = 0;4  const useState = (initial) => {5    const i = cursor++;6    if (!(i in slots)) slots[i] = initial;7    return slots[i];8  };9  return { render: (props) => { cursor = 0; return component(props, useState); } };10}11 12function Profile({ showName }, useState) {13  let name = null;14  if (showName) name = useState("Ada");   // breaks the rules15  const age = useState(36);16  const unused = showName ? null : useState("filler"); // keeps the count equal17  return { name, age };18}19 20export function run() {21  const p = createInstance(Profile);22  return [p.render({ showName: true }), p.render({ showName: false })];23}

The second render skipped the name hook, so age read slot 0 and got the name. (In development React also logs a warning that it detected a change in the order of hooks.) When the number of hooks changes between renders, React throws instead ("Rendered more hooks than during the previous render" or "Rendered fewer hooks than expected"). The fix is to always call the hook and make the use of its value conditional. React 19's use API is the one exception: it reads a promise or context and may be called inside a condition.

Common mistakes

• Expecting a custom hook to share state between components. Each call has its own slots, as the counters in the first example show.
• Calling a hook inside an if or after an early return. Later hooks read the wrong slots, or React throws when the count changes.
• Naming a plain helper useSomething. It misleads readers and the linter, and stops you calling it conditionally for no reason.
• Returning a new object or function from a hook on every render when callers pass it to memoised children or effect dependencies; memoise what the hook returns.

What interviewers ask

• Why can hooks not be called conditionally? — React matches each hook call to its stored state by call order; skipping a call shifts every later hook onto the wrong state.
• Do two components using the same custom hook share state? — No; each call has its own state. Share by lifting state up or using context.
• When would you write a custom hook? — When stateful logic (state plus effects) is repeated across components or makes one component hard to read.