Lingua-e
JavaScript

What is a Invalid Hook Call?

← Errors

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

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.

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