How to fix “Too many re-renders” error in React step by step?

Introduction

The “Too many re-renders” error in React is one of the most common runtime issues developers face when working with functional components and hooks. It usually occurs when a component enters an infinite render loop, causing React to stop execution to prevent crashing the application.

If not handled correctly, this error can break your UI, degrade performance, and make debugging difficult.

In this article, you will learn:

What causes the “Too many re-renders” error in React
How React rendering lifecycle works
Step-by-step ways to fix it
Real-world scenarios and debugging strategies
Best practices to avoid it in production

What is “Too many re-renders” Error?

This error occurs when a React component continuously updates its state during rendering, causing an infinite loop.

React detects this and throws an error:

“Too many re-renders. React limits the number of renders to prevent an infinite loop.”

How React Rendering Works

Understanding this is key:

Component renders
State or props change
Component re-renders

If state updates happen during rendering, the cycle repeats infinitely.

Root Causes of the Error

1. Updating State Directly Inside Component Body

function App() {
  const [count, setCount] = useState(0);
  setCount(count + 1);
  return <div>{count}</div>;
}

Problem

State updates inside the render phase trigger infinite re-renders.

Fix

Move logic inside useEffect:

useEffect(() => {
  setCount(count + 1);
}, []);

2. Incorrect Event Handler Usage

<button onClick={setCount(count + 1)}>Click</button>

Problem

Function executes immediately during render.

Fix

<button onClick={() => setCount(count + 1)}>Click</button>

3. Missing Dependency Array in useEffect

useEffect(() => {
  setCount(count + 1);
});

Problem

Effect runs on every render → infinite loop.

Fix

useEffect(() => {
  setCount(count + 1);
}, []);

4. Updating State Based on State Without Condition

useEffect(() => {
  setCount(count + 1);
}, [count]);

Problem

Each update triggers another update.

Fix

Add condition:

useEffect(() => {
  if (count < 5) {
    setCount(count + 1);
  }
}, [count]);

Real-World Scenario

Scenario: API Call Loop

useEffect(() => {
  fetchData();
  setData(...);
}, [data]);

Issue

Data update triggers effect again
Infinite API calls

Solution

Use empty dependency array
Or separate state logic

Before vs After Fix

Before:

Infinite rendering
App crashes
High CPU usage

After:

Stable rendering
Controlled updates
Better performance

Common Patterns That Cause Re-renders

Cause	Issue	Solution
State update in render	Infinite loop	Move to useEffect
Immediate function call	Executes on render	Use arrow function
Missing dependencies	Repeated execution	Add dependency array

Debugging Tips

Use console.log to track renders
Check dependency arrays
Use React DevTools Profiler

Advantages of Fixing Re-render Issues

Improved performance
Better user experience
Stable application behavior

Disadvantages (If Ignored)

App crashes
Infinite API calls
Memory and CPU issues

Best Practices

Never update state inside render
Always use dependency arrays in useEffect
Use functional updates when needed
Keep components pure

Summary

The “Too many re-renders” error in React occurs when a component enters an infinite rendering loop due to improper state updates or incorrect hook usage. By understanding how React’s rendering lifecycle works and applying best practices like using useEffect correctly, handling event handlers properly, and controlling state updates, developers can prevent this error and build stable, high-performance React applications.