← 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