React throws this error when a hook (useState, useEffect, etc.) is called outside the body of a function component or custom hook. Hooks rely on a consistent call order that React tracks per component instance, so they cannot be used in regular functions, class components, or conditionally.
Why it happens
- •Calling a hook inside a regular (non-React) function.
- •Calling a hook inside a class component.
- •Calling a hook conditionally (inside an if or try/catch).
- •Having two conflicting versions of React in node_modules.
Examples
Code that triggers the error
function getUser() {
// regular function, not a component
const [name, setName] = useState("Alice");
return name;
}Error output
Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
How to fix it
Only call hooks at the top level of function components or custom hooks. Move hook calls out of conditions, loops, and nested functions. If you need conditional logic, put it inside the hook, not around the hook call. Check for duplicate React packages with npm ls react.
Fixed code
function UserName() {
// uppercase name: React treats this as a component
const [name, setName] = useState("Alice");
return <span>{name}</span>;
}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