React Error: Too Many Re-renders — What It Means & How to Fix It

What Does This Error Mean?

This error means your component is stuck in an infinite render loop. Every time it renders, it triggers another render, which triggers another, and so on without stopping. React detects this after a certain number of re-renders and throws this error to stop the browser from freezing.

Affected Models

React 16.8 and later
All React function components using useState or useEffect

Common Causes

Calling setState (or a state setter) directly inside the component body, not inside an event handler or useEffect
Passing an event handler function call instead of the function itself — writing onClick={handleClick()} instead of onClick={handleClick}
A useEffect with no dependency array that updates state, causing an endless cycle of effect → state update → re-render → effect
A useEffect whose dependency array contains a value that changes every render (like an object or array created inline)
A state update in a useEffect that does not have correct conditions to stop updating

How to Fix It

Check your JSX for event handlers. Make sure you are passing the function, not calling it. Write onClick={handleClick} — NOT onClick={handleClick()}.

Adding () after the function name calls it immediately during render, which triggers state updates, which causes re-renders.
Move any setState calls out of the component body and into event handlers or useEffect. If setState is at the top level of your component (not inside any handler), it runs on every render.

State should only change in response to events, user actions, or useEffect — never during the render itself.
Check all useEffect hooks. Every useEffect that updates state must have a dependency array, and the condition inside must eventually stop updating state.

A useEffect without a dependency array runs after every render. If it updates state, it triggers another render, creating an infinite loop.
If a useEffect dependency is an object or array, move it outside the component or use useMemo/useCallback to stabilize it. Objects created inline are new every render, even if their content is the same.

Example: const options = useMemo(() => ({ key: value }), [value]); — this only creates a new object when value changes.
Add a condition inside useEffect to only update state when truly necessary: if (newValue !== currentValue) then setState.

This prevents the effect from updating state when nothing actually changed, breaking the loop.

When to Call a Professional

Too many re-renders errors are always fixable yourself. The most common fixes are: moving setState inside an event handler, fixing the onClick syntax, or adding proper dependency arrays to useEffect.

Frequently Asked Questions

What is the difference between 'Too many re-renders' and 'Maximum update depth exceeded'?

Too many re-renders happens during the render phase itself — state is being set directly in the component body. Maximum update depth exceeded happens when components update each other in a loop — parent updates child, child updates parent, endlessly. Both are infinite loops but they happen at different stages.

How do I find which state update is causing the loop?

Add console.log statements before each setState call to see which one fires repeatedly. React DevTools also shows render counts for each component. The component that shows a rapidly incrementing render count is where the loop starts.

Can I use setState inside useEffect safely?

Yes — but you need a dependency array and a stopping condition. Example: useEffect(() => { if (count < 10) setCount(count + 1); }, [count]) — this increments count up to 10 and stops. Without the if check, it would increment forever.