The Rules of Hooks

React 7,897 identifies a Hook by when it is called, not by a name or key you pass it. Each component instance keeps an ordered list of Hook slots: the render's first useState is slot 1, the next Hook call slot 2, and so on. On the next render React walks the same list in the same order and hands each call its slot back. Two rules follow.

Rule 1 — call Hooks only at the top level. Never inside a condition, a loop, a try/catch/finally block, an event handler, or after an early return. Anything that lets the number or order of calls vary between renders shifts every later Hook one slot, and a state value reappears as somebody else's.

Breaking, then fixing, the call orderJavaScript

function Profile({ user }) {
  if (!user) return null;                     // early return: the count can change
  const [draft, setDraft] = useState('');
  if (user.isAdmin) useEffect(logAdminVisit); // conditional Hook: never do this
}
function ProfileFixed({ user }) {
  const [draft, setDraft] = useState('');     // always slot 1
  useEffect(() => { if (user?.isAdmin) logAdminVisit(); }, [user]);
  if (!user) return null;                     // return after every Hook call
}

Put the condition inside the Hook, as the fixed version does, rather than around it. The figure below shows what the broken version does to the slot list once user.isAdmin turns false.

One skipped Hook call shifts every later slot on the next render

Rule 2 — call Hooks only from React functions. A Hook may be called from a function component's body or from another custom Hook, and nowhere else: not from a plain helper, a class method, or a setTimeout callback. A custom Hook may call Hooks precisely because it only ever runs while a component renders.

Both rules are enforced mechanically by eslint-plugin-react-hooks (7.1.1, MIT, github.com/facebook/react (https://github.com/facebook/react 250,789 )), added with npm 2,036 install -D eslint-plugin-react-hooks. It treats any function named use plus a capital letter as a Hook and any PascalCase function as a component. Since the React Compiler reached 1.0 its recommended preset also ships compiler-powered rules — exhaustive dependencies, purity, correct ref use — whether or not you enable the compiler.

MENU

The Rules of Hooks