React Error: Rendered More Hooks Than Previous Render — What It Means & How to Fix It

What Does This Error Mean?

This error means your component called more hooks in one render than it did in a previous render. React relies on hooks being called in exactly the same order every time a component renders. If new hooks appear or disappear between renders, React loses track of which state belongs to which hook — causing this error.

Affected Models

React 16.8 and later
All React function components using hooks

Common Causes

A hook was placed inside an if/else statement so it only runs when a condition is true
A hook was placed inside a loop whose iteration count changes between renders
A hook was called only after a conditional early return, so some renders skip it entirely
A component dynamically switches between two different implementations, one with more hooks than the other
A hook inside a short-circuit expression: condition && useMyHook() — this skips the hook when condition is false

How to Fix It

Find the hook being called conditionally. Look for any hook inside an if block, loop, or after an early return. The error in development mode will hint at the hook that changed position.

Common culprits: useState or useEffect inside 'if (data) { const [x, setX] = useState(); }' — this hook only runs when data is truthy.
Move all hooks to the very top of your component, before any conditional logic. Even if you only use the hook's result sometimes, the hook call itself must always happen.

Think of hooks as declarations at the top of a function. All declarations happen first, before any logic runs.
Replace conditional hook usage with conditional usage of the hook's return value. Call the hook every time, but only act on its value when the condition is met.

Wrong: if (show) { const [val, setVal] = useState(0); }. Right: const [val, setVal] = useState(0); then use val only when show is true.
If the conditional logic is complex and you genuinely need different hooks for different scenarios, split the component into two separate components. Each component has its own stable hook order.

Example: return condition ? <ComponentA /> : <ComponentB />; where each has its own hooks. React treats them as entirely separate components.
Add the eslint-plugin-react-hooks linter to your project. It catches Rules of Hooks violations before you run the app. The lint rule 'react-hooks/rules-of-hooks' will underline conditional hook calls in your editor immediately.

Run: npm install eslint-plugin-react-hooks --save-dev. Add to your .eslintrc: plugins: ['react-hooks'], rules: { 'react-hooks/rules-of-hooks': 'error' }

When to Call a Professional

This is always a code structure problem — the fix is to reorganise your hooks to always be called unconditionally. It is never a React bug or environment issue.

Frequently Asked Questions

What exactly is the 'Rules of Hooks'?

React has two rules about hooks. First: only call hooks at the top level — never inside conditions, loops, or nested functions. Second: only call hooks from React function components or custom hooks — never from regular JavaScript functions. These rules exist because React identifies hooks by their call order, not by their name. Violating either rule scrambles React's internal state tracking.

My hooks were all at the top level but I still got this error. What else could cause it?

Check for early return statements above your hooks. If a return fires before some hooks are reached, those hooks are never called — breaking the count. Also check for hooks inside immediately-invoked function expressions (IIFEs) or callbacks inside the component body. Another cause: in React Strict Mode during development, components are rendered twice. If the second render produces more hooks than the first, this error fires.

Can this error happen in production if it does not appear in development?

Yes, but it would be very unusual. The error fires at render time whenever the hook count changes — if it would happen in production, it almost certainly happens in development too. If it only appears in production, you may have a different code path running in production (for example, environment-specific code that adds hooks) or a minification issue. Always test in development with React DevTools to catch hooks errors early.