← All errors

React Hook is called conditionally / Rendered more hooks than during the previous render

Error: Rendered more hooks than during the previous render.

In one sentence: A React hook (useState, useEffect…) is being called inside an if, a loop, or after an early return.

What it means

React keeps track of hooks by the order they're called in. Every render must call the same hooks in the same order. If a hook is skipped on one render and called on the next, React can't match up the state and throws.

The ESLint version of this error says: "React Hook 'useEffect' is called conditionally. React Hooks must be called in the exact same order in every component render."

Common causes

• An early `return` (like `if (loading) return <Spinner/>`) placed above a hook.
• A hook inside an `if`, a loop, or a nested function.
• Calling a hook inside a regular function that isn't a component or a custom hook (name starting with `use`).

How to fix it

1. Move every hook to the top of the component, before any `if` or `return`.
2. Put the condition inside the hook instead: `useEffect(() => { if (!id) return; ... }, [id])`.
3. If you need a hook only sometimes, move that part into its own component and render that component conditionally.

function Profile({ id }) {
  if (!id) return null;
  const [user, setUser] = useState(null);
  useEffect(() => { load(id).then(setUser); }, [id]);
  ...

function Profile({ id }) {
  const [user, setUser] = useState(null);
  useEffect(() => { if (id) load(id).then(setUser); }, [id]);
  if (!id) return null;
  ...

Prompt to paste into your AI tool

React says hooks are called conditionally / rendered more hooks than the previous render. Move all hooks above any early returns and put conditions inside the hooks. Don't change the component's behavior otherwise.

Related errors

• TypeError: Cannot read properties of undefined
• CORS error: blocked by CORS policy
• Hydration failed: server HTML didn't match the client (Next.js)
• Module not found: Can't resolve '...'