JavaScript

Invalid Hook Call: What It Means and How to Fix It

Error reference

Invalid Hook Call

Language

JavaScript

Severity

Critical

When it happens

React throws this error when a hook (useState, useEffect, etc.) is called outside the body of a function component or custom hook.

Potential fixes

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.

Deep dive

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.

Potential fixes

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.

Examples

JavaScript

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.

Fixed code

function UserName() {
  // uppercase name: React treats this as a component
  const [name, setName] = useState("Alice");
  return <span>{name}</span>;
}

Practice in English

How would you explain an Invalid Hook Call 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