React  

How to Fix “Too Many Re-renders” Error in React?

Introduction

If you’re learning React, you have probably seen the error “Too many re-renders. React limits the number of renders to prevent an infinite loop.” This is one of the most common errors for beginners and happens when a component keeps updating itself endlessly. The good news? It’s easy to understand and fix once you know why it happens. In this article, we will explain why React throws this error, what triggers infinite re-renders, and how to fix them using simple, clean code examples.

Why React Shows the “Too Many Re-renders” Error

React re-renders a component whenever its state or props change. But if you update state during the render phase, React gets stuck in a loop:

  • Render component → update state → render component again → update state again → ... infinite loop

To protect your app (and your browser), React stops the process and shows this error.

Calling setState (or useState) Directly Inside the Render

This is the most common cause.

Wrong Code

function App() {
  const [count, setCount] = useState(0);
  setCount(count + 1); // ❌ This runs every render → infinite loop

  return <h1>{count}</h1>;
}

Correct Code

Move the state update into a button click or useEffect.

function App() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>Increase</button>
  );
}

Why This Fix Works

State updates should happen due to user actions or side effects, not during rendering.

Updating State Inside useEffect Without Proper Dependency Control

Sometimes, state updates inside useEffect can create loops.

Wrong Code

useEffect(() => {
  setValue(value + 1);
}); // No dependency array → runs every render

Correct Code

useEffect(() => {
  setValue(value + 1);
}, []); // Runs only once

Why It Works

The dependency array tells React when the effect should run.

State Updates Caused by Derived Values or Calculations

Sometimes developers try to sync state based on another state during the render.

Wrong Code

const [total, setTotal] = useState(0);
const price = 100;
setTotal(price * 2); // Causes continuous updates

Fix 1: Compute without state

const price = 100;
const total = price * 2;

Fix 2: Use useEffect

useEffect(() => {
  setTotal(price * 2);
}, [price]);

Re-render Loops Caused by Props Changing

If a parent component keeps updating props unnecessarily, child components re-render repeatedly.

Example

<Child data={{ name: "John" }} />

This creates a new object every render → child re-renders.

Fix Using useMemo

const memoizedData = useMemo(() => ({ name: "John" }), []);
<Child data={memoizedData} />;

Why This Matters

React compares props. If they change, it re-renders the component.

Infinite Loop in Conditional Rendering

Wrong Example

function App() {
  const [toggle, setToggle] = useState(false);

  if (!toggle) {
    setToggle(true); // Causes re-render every time
  }

  return <p>{toggle.toString()}</p>;
}

Fix

Use useEffect for conditional logic.

useEffect(() => {
  if (!toggle) setToggle(true);
}, [toggle]);

Re-render Loops Because of Functions Created on Every Render

React recreates functions on every render.

Wrong

<Child onClick={() => console.log("Clicked")} />

Fix Using useCallback

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

Use this only when needed.

Performing API Calls Inside Render

Wrong

const data = fetch("/api/data"); // Never do API calls inside render

This triggers re-renders constantly.

Correct

Use useEffect:

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

Fixing “Too Many Re-renders” in Forms

Wrong

<input
  value={text}
  onChange={() => setText(text + "a")}
/>

This updates on every keystroke in a loop.

Fix

<input
  value={text}
  onChange={(e) => setText(e.target.value)}
/>

Best Practices to Avoid Infinite Re-renders

  • Never call setState inside the main component body

  • Use useEffect for side effects

  • Always include proper dependency arrays

  • Avoid creating new objects/arrays inside JSX

  • Use useCallback/useMemo for optimization when needed

  • Keep state minimal and avoid duplicating values

  • Do not update state based on props during render

Conclusion

The “Too many re-renders” error in React happens when a component enters an infinite loop by updating state repeatedly. By understanding how React rendering works and following best practices — such as avoiding state updates in the render phase, managing useEffect dependencies correctly, and handling props efficiently — you can quickly fix and prevent these issues. With clean and structured logic, your React applications will run smoothly without unexpected rendering loops.

Membership not found