debugreactMajorpending
React infinite re-render loop -- maximum update depth exceeded
Viewed 0 times
Maximum update depthinfinite loopre-renderuseEffectdependency arraysetState in render
browser
Error Messages
Problem
React crashes with 'Maximum update depth exceeded' or the component keeps re-rendering indefinitely, freezing the browser.
Solution
Common causes: (1) Calling setState directly in render body (not in useEffect or event handler). (2) useEffect without dependency array: runs after every render, sets state, triggers re-render, loops. (3) Object/array as useEffect dependency: new reference every render. (4) Event handler calling setState inline: onClick={setCount(count+1)} calls immediately instead of onClick={() => setCount(count+1)}. Fix: always wrap setState in callbacks or useEffect with correct deps.
Why
React re-renders when state changes. If state changes during render (or in an effect that runs every render), it creates an infinite loop.
Revisions (0)
No revisions yet.