Too many re renders in React Fix Infinite Loop: Tutorial, Examples, FAQs & Interview Tips

What is This Error?

The "Too many re-renders" error occurs when React detects an infinite rendering loop. This happens when a component keeps triggering state updates during rendering, causing React to re-render endlessly until it hits its limit and throws this error.

Common Causes

Calling setState directly in the render body (not inside an event handler)
Passing an immediately-invoked function to an event handler: onClick={setState(value)}
useEffect with missing or incorrect dependency array causing infinite updates
Setting state unconditionally inside useEffect
Circular state updates between parent and child components

Quick Fix (TL;DR)

Quick Solution

// ❌ Problem "” calling setState during render
function App() {
  const [count, setCount] = useState(0);
  setCount(count + 1); // Infinite loop!
  return <div>{count}</div>;
}

// ✅ Solution "” only call setState in event handlers or useEffect
function App() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(c => c + 1)}>
      {count}
    </button>
  );
}

Common Scenarios & Solutions

The most common mistake "” calling the function immediately instead of passing a reference.

Problem

// ❌ setCount(0) is called immediately during render!
<button onClick={setCount(0)}>Reset</button>

// ❌ handleClick() is called immediately during render!
<button onClick={handleClick()}>Click</button>

Solution

// ✅ Pass a function reference, not a call
<button onClick={() => setCount(0)}>Reset</button>

// ✅ Pass the function reference directly
<button onClick={handleClick}>Click</button>

Problem

// ❌ Runs after every render → sets state → triggers render → infinite loop
useEffect(() => {
  setData(fetchData()); // No dependency array!
});

Solution

// ✅ Empty array = run only once on mount
useEffect(() => {
  setData(fetchData());
}, []); // Add dependency array

// ✅ Run only when specific value changes
useEffect(() => {
  setData(fetchData(userId));
}, [userId]); // Only re-run when userId changes

Problem

// ❌ options is a new object on every render → infinite loop
const options = { page: 1, limit: 10 };
useEffect(() => {
  fetchData(options);
  setResults(data);
}, [options]); // options changes every render!

Solution

// ✅ Use primitive values as dependencies
const [page, setPage] = useState(1);
const limit = 10;
useEffect(() => {
  fetchData({ page, limit });
  setResults(data);
}, [page]); // Primitive value "” stable reference

// ✅ Or memoize the object
const options = useMemo(() => ({ page: 1, limit: 10 }), []);

Problem

function Counter() {
  const [count, setCount] = useState(0);
  setCount(count + 1); // ❌ Called during render!
  return <div>{count}</div>;
}

Solution

function Counter() {
  const [count, setCount] = useState(0);
  // ✅ Only update state in response to events
  return (
    <button onClick={() => setCount(c => c + 1)}>
      Count: {count}
    </button>
  );
}

Best Practices to Avoid This Error

Never call setState in render body - Only call it in event handlers or useEffect
Pass function references to event handlers - Use onClick={handler} not onClick={handler()}
Always add dependency arrays to useEffect - Use [] for mount-only, or list specific dependencies
Use primitive values as dependencies - Avoid objects/arrays in dependency arrays
Use React DevTools - Profiler shows which component is re-rendering excessively
Add conditions in useEffect - Check before setting state to avoid unnecessary updates
Use eslint-plugin-react-hooks - Catches dependency array issues automatically

Related Errors

Frequently Asked Questions

What causes "Too many re-renders" in React?

This error occurs when React detects an infinite rendering loop, usually caused by calling setState during the render phase, incorrect event handler syntax, or useEffect without a proper dependency array.

How do I fix onClick={setState(value)}?

Wrap it in an arrow function: onClick={() => setState(value)}. Without the arrow function, setState is called immediately during render instead of when the button is clicked.

Why does useEffect cause infinite re-renders?

If useEffect has no dependency array, it runs after every render. If it sets state, that triggers another render, creating an infinite loop. Add [] for mount-only or list specific dependencies.

How do I debug infinite re-renders?

Use React DevTools Profiler to see which component re-renders. Add console.log in the render body to count renders. Check for setState calls outside event handlers and useEffect dependency arrays.

Can objects in useEffect dependencies cause infinite loops?

Yes! Objects and arrays are compared by reference in JavaScript. A new object {} !== {} even with the same content, so React sees it as changed every render. Use primitive values or useMemo to stabilize references.

Previous Next

Too many re renders in React Fix Infinite Loop: Tutorial, Examples, FAQs & Interview Tips

What is This Error?

Common Causes

Quick Fix (TL;DR)

Quick Solution

Common Scenarios & Solutions

Problem

Solution

Problem

Solution

Problem

Solution

Problem

Solution

Best Practices to Avoid This Error

Related Errors

Frequently Asked Questions

Level Up Your React JS Skills

Popular Tutorials

Ready to Level Up Your Skills?