Error AtlasError Documentation and Resolution
Back to searchMore React errors

React

React Hooks called outside a function component

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

React detected Hook usage outside the body of a function component, which usually means a Hook was called from unsupported code or the Rules of Hooks were broken.

React error #307runtime

Observed message

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

Why it happens

  • A Hook is being called in a regular function or unsupported callback.
  • Hooks are used inside conditions, loops, or nested functions.
  • The component structure violates the Rules of Hooks.

How to fix it

  1. Call Hooks only at the top level of a function component or custom Hook.
  2. Move Hook calls out of loops, conditions, event handlers, and nested helpers.
  3. Audit the component for Rules of Hooks violations.

Official reference

React Docs: Minified React error #307

Related errors

React error #426React component suspended while responding to synchronous inputReact error #187React flushSync called inside a lifecycle methodReact error #404React invalid hook callReact error #321React invalid hook call with mismatched versions or duplicate React

Explore more

ReactBrowse more React errorsruntimeBrowse more runtime errors
React error #307 Hooks can only be called inside the body of a function component | Error Atlas