JavaScript

Rendered Fewer Hooks Than Expected: What It Means and How to Fix It

Error reference

Rendered Fewer Hooks Than Expected

Language

JavaScript

Severity

Critical

When it happens

React tracks hooks by their call order.

Potential fixes

Always call all hooks at the top of the component before any conditional returns. Move the early return after all hook declarations. Use the hook's internal logic (if conditions inside the hook body) to handle conditional behavior.

Deep dive

React tracks hooks by their call order. If the number of hooks called changes between renders (because of an early return or conditional hook call), React throws this error. The Rules of Hooks require that every render calls the same hooks in the same order.

Why it happens

•An early return statement before all hook calls.
•A hook called inside an if/else block that only executes sometimes.
•A hook called inside a try/catch that is skipped when no error occurs.
•A component that conditionally renders completely different sets of hooks.

Potential fixes

Always call all hooks at the top of the component before any conditional returns. Move the early return after all hook declarations. Use the hook's internal logic (if conditions inside the hook body) to handle conditional behavior.

Examples

JavaScript

Code that triggers the error

function UserCard({ user }) {
  if (!user) return null; // early return BEFORE hooks
  const [liked, setLiked] = useState(false);
  return <div onClick={() => setLiked(true)}>{user.name}</div>;
}

Error output

Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement.

Fixed code

function UserCard({ user }) {
  const [liked, setLiked] = useState(false); // hook BEFORE early return
  if (!user) return null;
  return <div onClick={() => setLiked(true)}>{user.name}</div>;
}

Practice in English

How would you explain a Rendered Fewer Hooks Than Expected to a fellow dev? Choose the right phrase:

"I hit an error...

Ready to practice your English at work?

Lingua-e has interactive exercises built around real developer conversations: standups, code reviews, retrospectives, and more. Practice until it comes naturally.

Try Lingua-e for free