Maximum update depth exceeded
React stops execution because a component repeatedly schedules updates inside lifecycle callbacks or useEffect hooks.
Usually happens because:
- ☑ useEffect missing dependency array
- ☑ useEffect updates its own dependency
- ☑ componentDidUpdate unconditional state sets
🔍 Quick Checklist:
📊 Where this usually happens (estimated occurrence)
What is Maximum update depth exceeded?
Similar to 'Too many re-renders', this error occurs when a component recursively schedules state updates in lifecycle methods (like componentDidUpdate) or useEffect hooks. If updating state inside useEffect triggers a change that matches the hook's dependencies, the hook runs again and updates state again, creating an infinite loop.
Common Causes
- Updating state inside a useEffect without dependencies.
- Updating state inside useEffect on a dependency variable that is updated inside the same hook (circular updates).
- Calling state setters unconditionally in componentDidUpdate.
Common Mistakes
- Forgetting the dependency array in useEffect altogether.
How to Fix
Framework-Specific Examples
No framework examples required for this informational status.
Wrong: Circular useEffect update
useEffect(() => {
// Triggers state change which re-runs hook
setCount(c => c + 1);
}, [count]);Correct: Conditionally Guarded Updates
useEffect(() => {
if (count < 10) {
setCount(c => c + 1);
}
}, [count]);Best Practices
- Use ESLint rules (eslint-plugin-react-hooks) to check hook dependency listings.
Frequently Asked Questions (FAQ)
Q: What is the update depth limit?
React limits nested updates to 50 deep to prevent infinite loops from hanging the browser thread.
Q: Does updating refs trigger this error?
No. Changing ref values (`ref.current`) does not schedule renders, so it cannot trigger update loops.
Q: How do I update state based on previous state safely?
Use functional state updates: `setCount(prev => prev + 1)` which avoids adding the state variable itself to dependencies.
Q: Can context updates cause this error?
Yes. If a child updates context, causing the parent to update, which in turn triggers the child, a loop occurs.