React Error: Rendered Fewer Hooks Than Expected — What It Means & How to Fix It

What Does This Error Mean?

This error means the number of hook calls in your component changed between renders. On the first render, React counted a certain number of hooks. On a later render, fewer hooks ran. This happens when hooks are placed inside if statements, loops, or early returns — which can cause them to be skipped on some renders.

Affected Models

React 16.8 and later
All React function components using hooks

Common Causes

A hook is placed inside an if statement and the condition was false on a later render
An early return (return statement) before a hook call caused the hook to be skipped
A hook inside a loop ran fewer iterations than on the previous render
A conditional rendering block that includes hook calls is no longer rendered
A component that previously rendered was now conditionally not rendered, then re-rendered without its hooks

How to Fix It

Move all hook calls to the very top of your component function, before any if statements, early returns, or loops.

React must see the same hooks in the same order on every single render — no exceptions.
If you conditionally need a value, call the hook unconditionally but use the result conditionally.

Example: don't do 'if (showData) { const data = useFetch(); }'. Instead: const data = useFetch(); then use data only if showData is true.
Remove any early return statements that appear before hook calls in the component body. If you need to return early, move all hooks above that return.

A common pattern: checking for a required prop at the top. Move all hooks above that check, or handle the missing prop differently.
If you want to conditionally use a hook's output, pass a flag to the hook (if it supports it) rather than conditionally calling the hook.

Example: the useQuery hook in React Query accepts an 'enabled' option: useQuery(['key'], fetchFn, { enabled: shouldFetch }) — this prevents the fetch without skipping the hook.
If you need a hook only for part of your UI, extract that part into a separate component. The hook lives at the top of the child component and is always called when that component renders.

This is the cleanest solution when the conditional logic is complex.

When to Call a Professional

This error is always fixable yourself. The fix is to move all hook calls to the top of the component, before any conditions, loops, or early returns. This is one of the core Rules of Hooks.

Frequently Asked Questions

Why does React count hooks instead of just running whatever is there?

React stores each hook's state in an array. Hook number 1 stores its state at index 0, hook number 2 at index 1, and so on. If a hook is sometimes skipped, the indexes shift — hook 2 now reads what was hook 1's state. This causes hooks to read the wrong state, which produces corrupted, unpredictable behavior.

I have an early return to handle a loading state — where should my hooks go?

All hooks must come before the early return. Even if the component returns early while loading, React still needs to see all the hook calls. The pattern is: call all hooks first, then check if loading and return early if needed.

Can I put hooks inside a try/catch block?

No — hooks must be at the top level of the component, not inside any block structure including try/catch. If you need error handling for something a hook does, use React's Error Boundary pattern instead, or handle the error state with useState inside the hook's callback.