Rules of Hooks
Hooks are quantum phenomena — they must be observed in specific conditions to behave predictably. Violating these rules causes your component to collapse into an inconsistent state.
- Only call hooks at the top level of your function component or custom hook. Never inside loops, conditions, or nested functions.
- Only call hooks from React function components or custom hooks. Never from regular JavaScript functions.
- Custom hooks must start with
use so React's linter can enforce the rules.
- Each render must call the same hooks in the same order — React relies on this for state identity.