What are the Rules of Hooks in React, and why do these rules exist?

Question

Accepted Answer

There are two rules. Call hooks only at the top level of a component, never inside conditions, loops, nested functions, or after an early return. And call hooks only from React function components or from custom hooks, never from plain functions or class components.

Neither rule is arbitrary. Both follow from how React associates hook calls with stored state.

React does not know the names of your hooks. It keeps an ordered list per component and matches each call to a slot by position. The first useState call in a render maps to the first slot, the second to the second, and so on. That means the order and the number of hook calls must be identical on every render.

If you put a hook inside an if statement, the count changes when the condition changes. On the render where the condition is false, every hook after it shifts up one slot. A useState now reads the value that belonged to a different piece of state, or a useEffect gets another effect's dependency array. React either throws an error about a changed number of hooks, or worse, silently gives you the wrong values. An early return before a hook causes exactly the same problem, and it is the version people hit most often, because returning a loading state early feels natural.

The second rule exists because hooks need the React runtime. They read from the currently rendering component's internal context. Called from an ordinary function there is no such context, which is why you get the "invalid hook call" error. Custom hooks are the exception only because they run inside a component's render, which is also why the naming convention matters: prefixing with use is how the linter knows a function is allowed to call hooks and must itself follow the rules.

The practical patterns for working within the rules are simple. Put the condition inside the hook rather than around it: always call useEffect, and branch inside its body. Move all hooks above any early return. If a component genuinely needs a different set of hooks in different situations, that is a signal to split it into two components and choose between them in the parent.

The eslint-plugin-react-hooks rules catch nearly every violation, and the exhaustive-deps rule catches the related dependency bugs. Enabling them is not optional in a real codebase; these are failures that are cheap to prevent and expensive to debug.