Why Hooks Must Be Called at Top Level in React Explained

Hooks must be called at the top level of React components to ensure they run in the same order on every render. This consistent order allows React to correctly preserve state and effects between renders, preventing bugs caused by conditional or nested hook calls.

Syntax

Hooks are functions like useState or useEffect that must be called directly inside a React functional component or a custom hook. They cannot be called inside loops, conditions, or nested functions.

This means you write hooks at the top level of your component function, so React can track their order reliably.

jsx

function MyComponent() {
  const [count, setCount] = React.useState(0); // Hook called at top level

  React.useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  return <button onClick={() => setCount(count + 1)}>Click {count}</button>;
}

Example

This example shows a simple counter component using useState and useEffect hooks called at the top level. React keeps the state and effect consistent on every render.

jsx

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    console.log('Count changed:', count);
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

Output

Count: 0 (initial render)
Count changed: 0 (console log)

When button clicked:
Count: 1
Count changed: 1 (console log)

Common Pitfalls

Calling hooks inside conditions or loops breaks the rules and causes React to lose track of hook calls. This leads to bugs like state mismatches or errors.

Wrong example: calling useState inside an if block.

Right example: call hooks unconditionally at the top level.

jsx

function WrongComponent({ show }) {
  if (show) {
    const [value, setValue] = React.useState(0); // ❌ Hook inside condition
  }
  return <div>Check console</div>;
}

function RightComponent({ show }) {
  const [value, setValue] = React.useState(0); // ✅ Hook at top level

  if (!show) {
    return <div>Hidden</div>;
  }

  return <div>Value: {value}</div>;
}

Quick Reference

• Always call hooks at the top level of your React function.
• Never call hooks inside loops, conditions, or nested functions.
• This ensures React can keep hook calls in the same order on every render.
• Consistent order is required for React to preserve state and effects correctly.

Key Takeaways

Hooks must be called at the top level to keep their call order consistent across renders.

Calling hooks conditionally or inside loops breaks React's state tracking and causes bugs.

Always call hooks unconditionally in the main body of your functional component or custom hook.

React relies on the order of hook calls to preserve state and effects correctly.

Following this rule ensures your component behaves predictably and avoids runtime errors.