How to fix Rendered more hooks than during the previous render in React

What this error means

This error indicates that React detected a change in the number of hooks being called during a component's render cycle. React hooks (like useState, useEffect, useContext) must be called in the exact same order on every render because React tracks them using their call order in an internal linked list structure. When a hook is skipped or called conditionally on one render but not the next, React's internal tracking becomes misaligned. The framework expects the same sequence of hooks each time, and any deviation causes this error to be thrown. This is a fundamental requirement of how React's hooks system works - it relies on consistent call order rather than unique identifiers to associate each hook with its corresponding state and effects. The error message specifically means that on the current render, React encountered more hook calls than it did on the previous render, which violates the Rules of Hooks and indicates that hook calls are happening conditionally or in an inconsistent manner.

Typical symptoms

• Application crashes with "Rendered more hooks than during the previous render" error message
• Error occurs after conditional logic changes (like toggling a feature flag or authentication state)
• Component works initially but breaks when re-rendering with different props or state
• Console shows "React has detected a change in the order of Hooks" warning
• ESLint with react-hooks plugin shows warnings about conditional hook usage
• Development mode shows the error but the exact cause is unclear from the stack trace
• Error happens when returning early from a component before all hooks are called

Common causes

1. Calling hooks (useState, useEffect, etc.) inside if statements or conditional blocks
2. Placing hooks after an early return statement that sometimes executes and sometimes doesn't
3. Using hooks inside loops or iterating over arrays to generate multiple hook calls
4. Calling a component function directly (like MyComponent()) instead of using JSX (<MyComponent />)
5. Nesting hooks inside callback functions or event handlers instead of at the component top level
6. Conditionally rendering a component that contains hooks based on state or props
7. Having different code paths that call different numbers of hooks based on runtime conditions
8. Using hooks after conditional returns or throw statements that don't always execute

How to fix "Rendered more hooks than during the previous render"

function MyComponent({ isLoggedIn }) {
  if (!isLoggedIn) {
    return <Login />;
  }

  // ❌ This hook only runs when isLoggedIn is true
  const [user, setUser] = useState(null);
  return <div>{user?.name}</div>;
}

function MyComponent({ isLoggedIn }) {
  // ✅ Hook is always called at the top level
  const [user, setUser] = useState(null);

  if (!isLoggedIn) {
    return <Login />;
  }

  return <div>{user?.name}</div>;
}

function MyComponent({ shouldFetch }) {
  if (shouldFetch) {
    // ❌ Hook only called when shouldFetch is true
    useEffect(() => {
      fetchData();
    }, []);
  }
}

function MyComponent({ shouldFetch }) {
  // ✅ Hook always called, condition moved inside
  useEffect(() => {
    if (shouldFetch) {
      fetchData();
    }
  }, [shouldFetch]);
}

function Dashboard({ userType }) {
  if (userType === 'admin') {
    const [stats, setStats] = useState(null); // ❌ Conditional hook
    return <AdminDashboard stats={stats} />;
  }
  return <UserDashboard />;
}

function AdminDashboardWrapper() {
  const [stats, setStats] = useState(null); // ✅ Always called
  return <AdminDashboard stats={stats} />;
}

function Dashboard({ userType }) {
  if (userType === 'admin') {
    return <AdminDashboardWrapper />;
  }
  return <UserDashboard />;
}

function App() {
  const [count, setCount] = useState(0);
  // ❌ Calling component as a function
  return MyComponent({ count });
}

function App() {
  const [count, setCount] = useState(0);
  // ✅ Using JSX syntax
  return <MyComponent count={count} />;
}

function ItemList({ items }) {
  return items.map(item => {
    // ❌ Hook called in a loop - number changes with items.length
    const [selected, setSelected] = useState(false);
    return <Item key={item.id} selected={selected} />;
  });
}

function ListItem({ item }) {
  // ✅ Hook in separate component
  const [selected, setSelected] = useState(false);
  return <Item selected={selected} />;
}

function ItemList({ items }) {
  return items.map(item => (
    <ListItem key={item.id} item={item} />
  ));
}

npm install eslint-plugin-react-hooks --save-dev

{
  "plugins": ["react-hooks"],
  "rules": {
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn"
  }
}

function useAuth(requireAuth) {
  if (requireAuth) {
    // ❌ Conditional hook in custom hook
    const user = useContext(AuthContext);
    return user;
  }
  return null;
}

function useAuth() {
  // ✅ Always call the hook
  const user = useContext(AuthContext);
  return user;
}

// Use conditional logic at the call site instead
function MyComponent({ requireAuth }) {
  const user = useAuth();

  if (requireAuth && !user) {
    return <Login />;
  }
  return <Dashboard />;
}

Advanced notes

Frequently asked questions

What does "Rendered more hooks than during the previous render" mean?

This error indicates that React detected a change in the number of hooks being called during a component's render cycle. React hooks (like useState, useEffect, useContext) must be called in the exact same order on every render because React tracks them using their call order in an internal linked list structure. When a hook is skipped or called conditionally on one render but not the next, React's internal tracking becomes misaligned.

How do I fix "Rendered more hooks than during the previous render"?

This error occurs when the number of React hooks called changes between renders, typically because hooks are placed inside conditions, loops, or after early returns. React requires hooks to be called in the exact same order on every render to properly track component state.

What causes "Rendered more hooks than during the previous render"?

Calling hooks (useState, useEffect, etc.) inside if statements or conditional blocks Placing hooks after an early return statement that sometimes executes and sometimes doesn't Using hooks inside loops or iterating over arrays to generate multiple hook calls

Is the "Rendered more hooks than during the previous render" error serious?

Yes. This is a high-severity error that usually blocks work until it is fixed, but the steps above resolve it.

Related errors

• Warning: This element (component) does not expect children

  Element does not expect children in React

  MEDIUM

• Module not found: Can't resolve 'react'

  How to fix "Module not found: Can't resolve 'react'" in React

  HIGH

• Module has no default export

  Module has no default export

  MEDIUM

• ReferenceError: module is not defined

  How to fix "ReferenceError: module is not defined" in React

  MEDIUM

• Failed to resolve import. Does the file exist?

  How to fix "Failed to resolve import" in React

  HIGH

• npm ERR! code ETIMEDOUT npm ERR! network request to https://registry.npmjs.org timed out

  npm registry request timed out

  MEDIUM

Official resources & further reading

• 📚React Official Documentation
• 📖
  React Docs: Rules of Hooks - Invalid Hook Call Warning(Official Docs)
• 📖
  React Docs: Rules of Hooks(Official Docs)
• 🐙
  GitHub Discussion: Rendered more hooks than during the previous render(GitHub)
• 🐙
  react-navigation Issue: Order of hooks violation(GitHub)
• Medium: Why React Hooks Can't Be Called Conditionally
• Robin Wieruch: Conditional Hooks in React