Rules of Hooks

React enforces two invariants on Hook usage. Violating these causes state corruption and unpredictable behavior.

The Rules

1. Top-level only - Never call Hooks inside loops, conditions, nested functions, or try/catch/finally
2. React functions only - Call Hooks exclusively from function components or custom Hooks

Why: Consistent call order across renders; conditional/dynamic invocation breaks state tracking.

Valid Hook Locations

✅ Top level of function components ✅ Top level of custom Hooks (use* functions)

function Counter() {
  const [count, setCount] = useState(0);