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:

1. Component renders

2. State or props change

3. 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.