React Hook Rules: Why hooks declarations are not allowed inside functions

A Quick Explanation

Because React relies on the order of Hook calls to correctly associate state and effects with their respective components.
If you call Hooks conditionally or inside nested functions, that order can change between renders — and React would lose track of which state belongs to which Hook.

Code Explanation

React uses an internal array (or linked list) to keep track of Hooks for each component.
For example, when your component renders:

function MyComponent() {
  const [count, setCount] = useState(0); // Hook #1
  const [text, setText] = useState('');  // Hook #2
  useEffect(() => console.log(count));    // Hook #3
  ...
}

React doesn’t identify hooks by name — it relies on the order:

1. First hook → state slot 1
2. Second hook → state slot 2
3. Third hook → effect slot 3

Now imagine this:

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

  if (count > 0) {
    const [text, setText] = useState('Hello'); // ❌
  }

  useEffect(() => console.log(count));
}

On the first render (count = 0), Hook #2 (the conditional one) doesn’t run.
On the next render (count > 0), it does run — shifting the order of hooks.
React now mismatches the stored hook data (like state and effects), leading to broken or unpredictable behaviour.

Hence, React enforces the Rules of Hooks:

• ✅ Only call Hooks at the top level of your component.
• ✅ Only call Hooks from React functions (functional components or custom hooks).