Lingua-e
JavaScript

What is a Rendered Fewer Hooks Than Expected?

← Errors

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.

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.

How to fix it

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.

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

Related errors

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