What are the rules of hooks, and why do they exist?

There are two rules:

• Call hooks only at the top level of a component or custom hook. Not inside conditions, loops, nested functions or try/catch, and not after an early return.
• Call hooks only from React function components or custom hooks. Not from regular functions or class components.

The rules exist because React does not identify hooks by name. It stores each component's hook state in a list. It matches each hook call to an entry by its order. Think of numbered lockers: the first useState call always opens locker 1, and the second opens locker 2.

If a hook is skipped on one render, every hook after it reads the wrong slot. React throws an error when the number of hooks changes.

The eslint-plugin-react-hooks lint rules catch violations. The use API from React 19 is an exception: you can call it inside conditions and loops.