react runtime_error ai_generated true

Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

ID: react/too-many-re-renders-infinite-loop

Also available as: JSON · Markdown · 中文
92%Fix Rate
89%Confidence
1Evidence
2023-09-12First Seen

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
[email protected]+ active — — —
[email protected] active — — —
[email protected] active — — —

Root Cause

A component's state update triggers a re-render, which in turn triggers another state update synchronously (e.g., setState called directly in the render body or in an effect without proper dependencies), causing an infinite loop.

generic

中文

组件的状态更新触发了重新渲染，而重新渲染又同步触发了另一个状态更新（例如，在 render 函数体中直接调用 setState，或在依赖项不正确的 effect 中调用），导致无限循环。

Official Documentation

https://react.dev/learn/you-might-not-need-an-effect

Workarounds

  1. 90% success Ensure state updates are not called directly in the render body. Move them to event handlers or useEffect with proper dependencies. 
    Ensure state updates are not called directly in the render body. Move them to event handlers or useEffect with proper dependencies.
  2. 85% success If using useEffect, ensure the dependency array is correct and does not include variables that change on every render unnecessarily. 
    If using useEffect, ensure the dependency array is correct and does not include variables that change on every render unnecessarily.

中文步骤

  1. Ensure state updates are not called directly in the render body. Move them to event handlers or useEffect with proper dependencies.
  2. If using useEffect, ensure the dependency array is correct and does not include variables that change on every render unnecessarily.

Dead Ends

Common approaches that don't work:

  1. 95% fail

    There is no configurable limit; React hardcodes the limit to prevent infinite loops. Increasing it would only delay the crash.

  2. 70% fail

    useCallback does not prevent the infinite loop; it only prevents unnecessary re-creation of functions. The loop is caused by the call itself, not the function identity.

  3. 60% fail

    While this may break the synchronous loop, it is a hack that leads to unpredictable behavior and does not address the root cause.