Error AtlasError Documentation and Resolution
Back to searchMore React errors

React

React invalid hook call with mismatched versions or duplicate React

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

React reported an invalid hook call and included the common root causes: mismatched React and renderer versions, broken Rules of Hooks, or more than one React copy in the app.

React error #321runtime

Observed message

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

Why it happens

  • The app has mismatched versions of React and the renderer such as react-dom.
  • The component breaks the Rules of Hooks.
  • More than one copy of React is installed in the application.

How to fix it

  1. Verify React and react-dom versions are aligned.
  2. Review Hook call order and placement against the Rules of Hooks.
  3. Inspect the dependency tree and bundling setup for duplicate React installations.

Official reference

React Docs: Minified React error #321

Related errors

React error #426React component suspended while responding to synchronous inputReact error #187React flushSync called inside a lifecycle methodReact error #307React Hooks called outside a function componentReact error #404React invalid hook call

Explore more

ReactBrowse more React errorsruntimeBrowse more runtime errors
React error #321 Invalid hook call: causes and fixes | Error Atlas