Invalid hook call ⚛️ React

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

A hook ran outside a function component/custom hook, conditionally — or two copies of React are loaded.

Seen on: React

Meaning

React lists three causes and they are exactly the ones to check: mismatched React and renderer versions, breaking the Rules of Hooks, or more than one copy of React in the bundle (common with npm link / monorepos / libraries bundling React).

Common causes

  • Calling a hook in a class component, a regular function, or an event handler
  • Calling hooks conditionally or inside loops
  • Two copies of React (library lists react as dependency instead of peerDependency, npm link)
  • react and react-dom versions differ

⚡ Quick fix

  1. Only call hooks at the top level of function components or custom hooks (useX)
  2. Check duplicates: npm ls react
  3. Make libraries use react as a peerDependency
  4. Align react and react-dom versions

Detailed fix by platform

React

  1. Find duplicate React copies:
    bash
    npm ls react react-dom
# monorepo/linked lib: point the bundler at one copy, e.g. Vite
#   resolve: { dedupe: ['react', 'react-dom'] }

Code examples

Hook inside a callback

jsx
function Profile() {
  const onClick = () => {
    const [open, setOpen] = useState(false);   // ❌ hook inside a handler
  };
  const [open, setOpen] = useState(false);     // ✅ top level of the component
}

How to diagnose

  1. Location — Where is the hook called?
  2. Duplicates — npm ls react — more than one?
  3. Versions — react vs react-dom versions

🧠 Still stuck? Analyze your error

Paste the full message, response headers or stack trace — we'll detect the platform and point to the most likely cause.