Introduction

One of the most common errors beginners face in ReactJS is the “Too Many Re-renders” error.

This error happens when a React component continuously re-renders without stopping. React detects this infinite rendering cycle and stops the application to prevent browser crashes and performance issues.

The error usually appears because:

• State updates happen incorrectly
• useEffect causes infinite loops
• Functions execute during rendering
• State changes trigger endless re-renders

What is the “Too Many Re-renders” Error?

React components re-render whenever:

• State changes
• Props change
• Parent component re-renders

However, if React notices that rendering never stops, it throws the error:

Too many re-renders.

Note: React limits the number of renders to prevent an infinite loop. This protects the browser from freezing.

What is Re-rendering in React?

Re-rendering means React updates the UI again.

Example:

• State changes
• Component updates
• React renders new UI

Re-rendering is normal in React.

But continuous re-rendering becomes a problem.

How Infinite Re-render Happens?

Flow

1. Component renders
2. State updates
3. State change triggers re-render
4. Component renders again
5. State updates again
6. Loop continues forever

Most Common Cause of This Error

The most common reason is updating the state directly inside the component body.

Wrong Example

import { useState } from "react";
function App() {
 const [count, setCount] = useState(0);
 setCount(count + 1);
 return (
   <h1>{count}</h1>
 );
}
export default App;

Why This Causes Infinite Re-render?

Step-by-Step

Step 1

Component renders.

Step 2

setCount() updates state.

Step 3

State update triggers re-render.

Step 4

Component renders again.

Step 5

setCount() runs again.

Step 6

Loop never stops.

Correct Solution

Move state updates into:

• Event handlers
• useEffect
• Conditions

Correct Example

import { useState } from "react";
function App() {
 const [count, setCount] =
   useState(0);
 return (
   <button
     onClick={() =>
       setCount(count + 1)
     }
   >
     {count}
   </button>
 );
}
export default App;

useEffect Infinite Loop

Another common reason is incorrect useEffect.

Wrong Example

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

Why This Causes Error?

• useEffect runs
• State updates
• Component re-renders

Infinite loop begins.

Correct Example

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

Why Dependency Array Fixes It?

The empty dependency array:

tells React:

• Run the effect only once
• Run after the first render only

Calling Function Immediately Instead of Passing Reference

This is another very common beginner mistake.

Wrong Example

<button onClick={handleClick()}>
 Click
</button>

Why This Causes Re-render?

handleClick() executes immediately during rendering.

If it updates state:

• Component re-renders
• Function executes again
• Loop continues

Correct Example

<button onClick={handleClick}>
 Click
</button>

State Update Inside Conditional Rendering

Incorrect conditions can also create loops.

Wrong Example

if (count < 5) {
 setCount(count + 1);
}

Why This is Dangerous?

State updates happen during rendering.

Even conditions may still cause multiple re-renders.

Better Solution

Use useEffec.

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

Infinite Loop with Props

Props can also trigger re-renders.

Example

function Child({ setCount }) {
 setCount(10);
 return 
Child
;
}

Why This Causes Problem?

Parent state updates continuously whenever child renders.

Correct Solution

Use:

• Event handlers
• useEffect
• Conditions carefully

Real-Life Example

Imagine an e-commerce website.

If product API continuously triggers state updates:

• API requests repeat infinitely
• Server load increases
• Website becomes slow

This usually happens due to incorrect useEffect.

Example of API Re-render Issue

Wrong Example

useEffect(() => {
 fetchProducts();
});

Problem

Every render triggers:

• API request
• State update
• Re-render
• Another API request

Correct Example

useEffect(() => {
 fetchProducts();
}, []);

Re-render vs Infinite Re-render

Common Causes of Too Many Re-renders Error

Using useCallback to Prevent Re-renders

Functions recreate during every render.

useCallback memoizes functions.

Example

const handleClick = useCallback(() => {
 console.log("Clicked");
}, []);

Using useMemo to Prevent Re-renders

Objects and arrays create new references during every render.

useMemo helps optimize them.

Example

const user = useMemo(() => {
 return {
   name: "John"
 };
}, []);

Best Practices to Avoid Too Many Re-renders

1. Never Update State During Rendering

State updates should happen in:

• Event handlers
• Effects
• Async operation

2. Use Dependency Arrays Properly

Always check useEffect dependencies.

3. Avoid Immediate Function Execution

Wrong:

onClick={handleClick()}

Correct:

onClick={handleClick}

4. Use Conditions Carefully

Avoid uncontrolled state updates.

5. Optimize Components

Use:

• useMemo
• useCallback
• React.memo

Common Mistakes

1. Updating State in Component Body

Wrong:

setCount(count + 1);

2. Missing Dependency Array

Wrong:

useEffect(() => {
 fetchData();
});

3. Immediate Event Handler Execution

Wrong:

onClick={handleClick()}

4. Using Objects in Dependencies Incorrectly

Objects recreate on every render.

5. Ignoring React Warnings

React warnings help identify issues early.

Real-World Scenario

Suppose a social media app fetches notifications.

Incorrect useEffect:

useEffect(() => {
 fetchNotifications();
});

This causes:

• Infinite API requests
• Server overload
• Slow user experience

Correct dependency arrays solve this issue.

Advanced Example

import {
 useEffect,
 useState
} from "react";
function App() {
 const [users, setUsers] =
   useState([]);
 useEffect(() => {
   async function fetchUsers() {
     const response =
       await fetch(url);
     const data =
       await response.json();
     setUsers(data);
   }
   fetchUsers();
 }, []);
 return (
   <div>
     {users.map((user) => (
       <p key={user.id}>
         {user.name}
       </p>
     ))}
   </div>
 );
}

Performance Issues Caused by Infinite Re-renders

Infinite re-renders can cause:

• Browser crashes
• High CPU usage
• Memory leaks
• Slow performance
• Excessive API requests

Conclusion

The Too Many Re-renders error is one of the most common React errors beginners face.

It mainly happens because:

• State updates occur during rendering
• useEffect loops infinitely
• Event handlers execute immediately
• Dependency arrays are incorrect

Understanding React rendering flow is essential for avoiding this issue.

Mastering these concepts helps developers build stable, optimized, and professional React applications.

Continue Learning React