Invalid Hook Call Warning: Causes and Solutions

The invalid hook call warning means a Hook was called somewhere React does not allow. The usual causes are breaking the Rules of Hooks, mismatched React versions, or two copies of React in the same bundle. Each has a distinct fix.

The three causes

React throws "Invalid hook call. Hooks can only be called inside of the body of a function component" when it detects a Hook in an unsupported context.

All three produce the same message, so the fix depends on which one applies. The call site is the fastest thing to check.

Fix the Rules of Hooks

Hooks must run at the top level of a function component or a custom Hook. A Hook inside a condition breaks that rule.

App.jsx

function Message({ warning }) {
  if (warning) {
    const [seen, setSeen] = useState(false);
  }
  return <p>Message</p>;
}

The number of Hook calls changes between renders, which React forbids. Move the Hook to the top level and use the condition inside it.

App.jsx

function Message({ warning }) {
  const [seen, setSeen] = useState(false);
 
  if (warning && !seen) {
    setSeen(true);
  }
 
  return <p>Message</p>;
}

Now the Hook always runs, and the condition only decides what happens next. The fix is the same for loops, nested functions, and early returns: move the Hook above them. See the Rules of Hooks explained for the full list of forbidden call sites.

Align your versions

React and React DOM must be the same version, because the Hook dispatcher lives in one copy of React. Open the package file and confirm both resolve to the same version.

Installing or upgrading them together, such as with the same version range, avoids a mismatch where one package still points at an older copy. A mismatch is easy to miss because both packages usually install as react and react-dom without a version check.

Remove the duplicate React

If the same app bundles two copies of React, one copy owns the state and the other reads a different dispatcher, which triggers the warning. This often comes from a dependency that bundles its own React.

Check the resolved tree for duplicate entries and deduplicate, or add a resolution so every package points at one React version. This one often appears after adding a library that bundles its own copy. See common React setup errors and how to fix them for the dependency side of this.