← All errors

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

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

In one sentence: React found a hook (useState, useEffect, useRouter…) somewhere it can't run: outside a component, inside a normal function, or with two copies of React loaded.

What it means

Hooks only work while React is rendering a component. If a hook runs anywhere else (at the top of a file, inside a regular helper function, inside an event handler or a class) React throws this error.

The other common cause is having two copies of React in the same app, which often happens after an AI tool installs a UI or component library that brings its own React version.

Common causes

• Calling a hook inside a normal function, a callback, an event handler or a loop instead of at the top level of a component.
• Calling a hook in a function whose name doesn't start with a capital letter (a component) or with `use` (a custom hook).
• Calling a component like a function (`MyComponent()`) instead of rendering it (`<MyComponent />`).
• Two copies of React installed, or `react` and `react-dom` on different versions.

How to fix it

1. Open the file in the stack trace and move every hook to the top level of the component body, before any `if` or `return`.
2. If the logic lives in a helper, rename it to start with `use` (for example `useCart`) and only call it from components or other hooks.
3. Render components with JSX (`<Header />`), never by calling them as functions.
4. Run `npm ls react` to check for duplicate copies. If you see more than one, make `react` and `react-dom` the same version in package.json, delete `node_modules` and the lock file, and reinstall.

function handleClick() {
  const router = useRouter(); // hook inside an event handler
  router.push("/done");
}

export default function SaveButton() {
  const router = useRouter(); // top level of the component
  const handleClick = () => router.push("/done");
  return <button onClick={handleClick}>Save</button>;
}

Tried this and it's still broken? Paste your exact error for a free explanation of your specific case.

Prompt to paste into your AI tool

My React app throws 'Invalid hook call'. Find every hook that is called outside the top level of a component or custom hook (inside handlers, helpers, loops or conditions) and move it to the top level. Also check package.json for mismatched react / react-dom versions. Don't change unrelated code.

Related errors

• npm ERR! ERESOLVE unable to resolve dependency tree
• Error: listen EADDRINUSE: address already in use :::3000
• Stripe: No signatures found matching the expected signature for payload
• Next.js Image: hostname is not configured under images in next.config.js