Error AtlasError Documentation and Resolution
Back to searchMore React errors

React

React rendered more hooks than during the previous render

Rendered more hooks than during the previous render.

React found that a component called more Hooks than it did previously, which indicates the Hook order changed between renders.

React error #310runtime

Observed message

Rendered more hooks than during the previous render.

Why it happens

  • A Hook is only called in certain branches or conditions.
  • The component's render path adds a Hook on some renders but not others.
  • Hook order changes because stateful logic is nested inside conditionals.

How to fix it

  1. Call Hooks in the same order on every render.
  2. Move conditional logic inside the Hook body rather than around the Hook call.
  3. Review recent refactors for Hooks introduced into conditional branches.

Official reference

React Docs: Minified React error #310

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 #310 Rendered more hooks than during the previous render | Error Atlas