Invalid hook call (React Hooks rules / duplicate React)

React refused a Hook call because the call site broke the Rules of Hooks, or because more than one copy of React is loaded so Hook state is not shared with the component that rendered.

How it shows up

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
    at resolveDispatcher
    at useState …

Dev builds often print the three-reason checklist. Production may only show the short Invalid hook call line.

What React expects

1. Hooks run only while React is rendering a function component (or a custom Hook that was itself called from one).
2. Same order every render — no hooks inside loops, conditions, or after early return.
3. One React module instance shared by your app and react-dom / React Native.

vs hydration failed

Cause 1 — Rules of Hooks broken

// Bad: hook in a plain function
function loadUser() {
  const [user, setUser] = useState(null); // Invalid hook call
  …
}

// Bad: conditional hook
function Profile({ id }) {
  if (!id) return null;
  const [user, setUser] = useState(null); // order/presence changes
  …
}

// Good: hooks at top level of a function component
function Profile({ id }) {
  const [user, setUser] = useState(null);
  if (!id) return null;
  …
}

// Good: custom hook named use…
function useUser(id) {
  const [user, setUser] = useState(null);
  useEffect(() => { … }, [id]);
  return user;
}

Cause 2 — duplicate React

npm/yarn/pnpm can nest a second react under a library. Then your component uses React A’s dispatcher while the library’s hooks talk to React B — Invalid hook call.

# See how many physical copies you have
npm ls react
pnpm why react
yarn why react

# Often in a linked local package / monorepo:
# peerDependencies on react + bundler alias / dedupe

Fixes that usually work: declare react / react-dom as peerDependencies in libraries; hoist/dedupe so only one version resolves; in Webpack/Vite alias both react and react-dom to the app’s node_modules/react. Compare two lockfile trees in the text diff tool if needed.

Cause 3 — mismatched renderer

• React 18 app with an old react-dom (or the reverse).
• Importing react-dom/client APIs while another bundle still ships an ancient React.
• Using hooks from react inside a non-React runtime (plain Node script, wrong test renderer).

npm ls react react-dom
# Align versions deliberately, e.g. both 18.3.x or both 19.x

Fix checklist

1. Move every use* call to the top level of a function component or custom Hook.
2. Run npm ls react — if you see more than one version/path, dedupe or alias.
3. Match react and react-dom (and React Native) major/minor as your stack documents.
4. In monorepos, ensure the package under test resolves React from the workspace root.
5. If the stack trace points at a third-party UI kit, upgrade it or force resolutions until npm ls react is flat.
6. Hydration warnings without Invalid hook call → use the hydration failed guide instead.

Related

React hydration failed · Module not found: Can't resolve · Cannot find module (Node) · npm ERESOLVE · npm ERR! code ELIFECYCLE · TypeError: Failed to fetch · Cannot GET / (Express)

Questions

Published 6 November 2026.