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

ReactINTERMEDIATEHIGH

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 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.

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

1Move all hooks to the top level of your component

Ensure all hook calls happen before any conditional logic or return statements. Hooks must always execute in the same order.

Before (incorrect):

jsx

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>;
}

After (correct):

jsx

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>;
}

2Move conditional logic inside hooks instead of around them

If you need conditional behavior, place the condition inside the hook rather than conditionally calling the hook itself.

Before (incorrect):

jsx

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

After (correct):

jsx

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

3Extract conditional components into separate child components

When you need to conditionally use hooks, create a separate component that always calls its hooks in a consistent order.

Before (incorrect):

jsx

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

After (correct):

jsx

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

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

4Replace direct component function calls with JSX syntax

If you're calling component functions directly instead of using JSX, this can disrupt React's render cycle and hook tracking.

Before (incorrect):

jsx

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

After (correct):

jsx

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

5Check for hooks inside loops and remove them

Never call hooks while iterating over arrays or in any kind of loop structure.

Before (incorrect):

jsx

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} />;
  });
}

After (correct):

jsx

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} />
  ));
}

6Enable ESLint rules for hooks to catch violations

Install and configure eslint-plugin-react-hooks to automatically detect hook rule violations during development.

bash

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

Add to your .eslintrc.json:

json

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

This will show errors in your editor when you violate the Rules of Hooks, catching issues before runtime.

7Review custom hooks for conditional hook calls

If you're using custom hooks, ensure they also follow the Rules of Hooks and don't call hooks conditionally.

Before (incorrect):

jsx

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

After (correct):

jsx

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 />;
}

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

What this error means

Typical symptoms

Common causes

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

Advanced notes

Related errors

Official resources & further reading