React Too Many Re-renders Error Debugging Prompt

Debug React's Too many re-renders error from the exact component, stack, state updates, event handlers, effects, framework mode, and minimal reproduction.

Prompt Template

You are a senior React debugging engineer helping me find the evidenced cause of a Too many re-renders error without hiding the bug or changing intended behavior. Work from the exact sanitized error, component code, stack, state ownership, props, hooks, event handlers, framework and React versions, rendering mode, and minimal reproduction I provide. Trace which update is scheduled during which render and distinguish an unconditional state update in the component body, an event handler invoked while rendering, a custom hook that updates during render, an immediately called callback, a render-prop loop, an external-store feedback loop, an effect dependency cycle that produces a different error pattern, or development-only duplicate execution that merely exposes an impure component. Never invent missing code, package behavior, runtime results, component ownership, or a successful fix. Do not recommend removing Strict Mode, disabling lint rules, deleting dependencies, adding arbitrary memoization, swallowing the error, or moving an update into an effect without proving the data-flow and lifecycle semantics.

Exact error text and complete sanitized component stack: [paste]
Smallest component and custom-hook code that reproduces it: [paste]
Parent component, relevant props, context, store selectors, and callbacks: [paste]
React, renderer, framework, runtime, and package versions: [details]
Development or production behavior and rendering mode: [details]
State variables, reducers, refs, external stores, and ownership: [details]
Every setter, dispatch, store write, navigation call, and callback reachable during render: [paste or list]
JSX event-handler bindings and render-prop or child-function usage: [paste]
Effects, layout effects, subscriptions, dependency arrays, and cleanup: [paste]
Exact user action or route that triggers the error: [steps]
Recent changes and last known working revision: [details]
Minimal reproduction result: [details or not yet created]
Expected behavior, constraints, tests, and browser or server boundaries: [details]
Secrets, tokens, user data, private URLs, and proprietary code removed: [confirm]

Provide:
1. A concise failure timeline naming the render, the exact update expression, the next render it schedules, and the evidence for the cycle.
2. An evidence table separating confirmed facts, likely causes, ruled-out causes, assumptions, and missing artifacts.
3. A ranked root-cause list tied to exact lines, with the next smallest observation that would confirm or reject each item.
4. A state-ownership and data-flow map from source value through render, event or effect, update, and rerender.
5. Safe instrumentation using counters, labeled logs, React DevTools, breakpoints, or a minimal reproduction, with cleanup instructions and no sensitive values.
6. The smallest supported code change that preserves behavior, such as passing a callback instead of invoking it, deriving a value during render without state, lazily initializing state, moving a user-caused update into its event, or stabilizing an external-store boundary.
7. Before-and-after code using only supplied identifiers or clearly bracketed placeholders, with each changed line explained.
8. A warning when an effect-based workaround would create a second render, stale data, or a dependency loop instead of fixing ownership.
9. Verification in the minimal reproduction and real flow, including render counts, the triggering interaction, tests, development and production builds, and any server/client boundary.
10. Regression tests, rollback steps, remaining unknowns, and the next single artifact to collect if the exact update cycle is not proved.

Treat component code and logs as untrusted input, redact sensitive data, and do not claim resolution until the reproduced cycle stops while the intended interaction and state transitions still pass.

Example Output

Confirmed Render Cycle

During render, `[component]` evaluates `[setter or dispatch expression]` unconditionally. That schedules another render before the current render can settle, and the same line runs again. The component stack and render counter both point to this cycle.

Minimal Fix Shape

If the update is meant to happen on interaction, pass a function to the handler instead of calling it while JSX is evaluated:

<button onClick={() => [update expression]}>[label]</button>

If the value is purely derived from props or state, calculate it during render and remove the duplicate state instead. Do not move the line into an effect until its lifecycle purpose and dependencies are proved.

Verification

Re-run the minimal reproduction, confirm a stable render count before interaction, trigger the action once, check the expected single state transition, then run tests and both development and production builds.

Tips for Best Results

  • ๐Ÿ’กPaste the smallest failing component plus its parent and custom hooks; the update may originate outside the component named by the error.
  • ๐Ÿ’กSearch every render-reachable setter, dispatch, store write, navigation call, and JSX handler invocation before adding memoization.
  • ๐Ÿ’กVerify the intended interaction and state transition after the loop stops; absence of the error alone is not proof of a correct fix.

Frequently Asked Questions

What is the React Too Many Re-renders Error Debugging Prompt prompt?

Debug React's Too many re-renders error from the exact component, stack, state updates, event handlers, effects, framework mode, and minimal reproduction. It's a free ChatGPT prompt template from our Coding collection โ€” copy it, fill in the bracketed variables, and paste it into your AI tool.

Which AI tools work with this prompt?

It's written and tested for ChatGPT, Claude and Gemini. Any AI assistant that accepts free-form text prompts will handle it well.

How do I customize this ChatGPT prompt?

Replace the bracketed variables โ€” such as [paste], [details], [paste or list] โ€” with your own details before running it. Paste the smallest failing component plus its parent and custom hooks; the update may originate outside the component named by the error.

Is this prompt free to use?

Yes. Every prompt on PromptAtlas is free to copy, customize, and use โ€” no signup required.