Invalid hook call. Hooks can only be called inside of the body of a function component

  • React

What it means

A React hook (useState, useEffect…) ran somewhere React does not allow: outside a component, inside a condition or loop, or with two copies of React installed.

Why it happens

  • A hook is called in a normal function, a condition or a loop.
  • A hook is called inside an event handler or a callback.
  • Two versions of React are installed, often after adding a package.

How to fix it

  1. Call hooks only at the top level of components and custom hooks.
  2. Move logic that needs a hook into a custom hook named useSomething.
  3. Run npm ls react: if there are two versions, align them.

Let your AI find the cause

Paste this into Claude Code, Cursor, Lovable or whichever AI built your app. It looks first and changes nothing until you have read the answer.

My app throws 'Invalid hook call'. Without changing anything yet, find the hook in the stack trace, tell me where and how it is called, and run npm ls react to check for duplicate React versions.