What causes Invalid Hook Call?

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.

← Errors

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...

Debugging in English?

You just read real developer English to fix this. Lingua-e has free exercises built the same way: standups, code reviews, and real workplace scenarios.

Practice developer English, free