Too many re-renders in React - Fix Infinite Loop (2026) | Tutorials Logic

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.

Error Message:
Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

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 {count};
}

// ✅ Solution — only call setState in event handlers or useEffect
function App() {
  const [count, setCount] = useState(0);
  return (
    
  );
}

Common Scenarios & Solutions

Scenario 1: Immediately Invoked Event Handler

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

Problem

// ❌ setCount(0) is called immediately during render!


// ❌ handleClick() is called immediately during render!

Solution

// ✅ Pass a function reference, not a call


// ✅ Pass the function reference directly

Scenario 2: useEffect Without Dependency Array

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

Scenario 3: Object/Array in useEffect Dependencies

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 }), []);

Scenario 4: setState in Render Body

Problem

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

Solution

function Counter() {
  const [count, setCount] = useState(0);
  // ✅ Only update state in response to events
  return (
    
  );
}

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

Key Takeaways

"Too many re-renders" means React detected an infinite rendering loop
Never call setState directly in the render body — only in event handlers or useEffect
Pass function references to event handlers: onClick={fn} not onClick={fn()}
Always add a dependency array to useEffect to control when it runs
Objects and arrays in dependency arrays cause infinite loops — use primitives instead
Use React DevTools Profiler to identify which component is causing excessive re-renders