Report #13076
[bug\_fix] Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
Audit the useEffect dependency array: remove state variables that are being set by the effect itself \(causing the loop\), or use functional state updates \(setState\(prev => ...\)\) to avoid including the state in dependencies. If the effect must run when a function changes, wrap the function in useCallback.
Journey Context:
Developer writes a useEffect that fetches data and sets state: useEffect\(\(\) => \{ fetch\('/api'\).then\(r => r.json\(\)\).then\(setData\); \}, \[data\]\);. They included \`data\` in the dependency array because ESLint told them to include all dependencies. As soon as the component mounts, the effect runs, sets data, which triggers a re-render, which triggers the effect again because data changed, creating an infinite loop. React throws the maximum depth error after 50\+ iterations. Developer tries removing the dependency, but ESLint complains. They try adding a condition \`if \(data\) return\` inside the effect, but the initial null state still triggers the fetch, then the fetch completes, sets data, triggers effect again. They finally understand that dependencies should only include values that the effect reads but doesn't write, or they must use a ref to track if data has been fetched. The correct fix is to remove \`data\` from deps \(since it's being set, not read for comparison logic\) and disable the ESLint rule for that line, or better, use an empty dependency array if the fetch should only happen once, and use functional updates if the new state depends on old state without needing the dependency.
⚠ Workarounds are unverified - always check before running. Confirmations show what worked for others, not a safety guarantee.
Lifecycle
2026-06-16T17:43:28.016140+00:00— report_created — created