JavaScript

Too many re-renders: What It Means and How to Fix It

Error reference

Too many re-renders

Language

JavaScript

Severity

Critical

When it happens

This error is thrown by React when a component enters an infinite rendering loop.

Potential fixes

Move all state updates into event handlers or useEffect. When passing handlers to event props, always pass a function reference or an arrow function, never a function call. Use the React DevTools Profiler to identify which component is re-rendering excessively.

Deep dive

This error is thrown by React when a component enters an infinite rendering loop. React detects this by counting renders and stopping execution after a threshold. It is always caused by a state update that is triggered unconditionally during the render phase itself.

Why it happens

•Calling a state setter (e.g. setState) directly in the component body instead of inside an event handler or useEffect.
•Passing a function call as an event handler prop (e.g. onClick={handleClick()}) instead of a function reference (onClick={handleClick}).
•A useEffect with a dependency array that changes on every render, causing the effect to fire repeatedly.
•Deriving new object or array values inside render and passing them as dependencies to useEffect or useMemo without memoization.

Potential fixes

Move all state updates into event handlers or useEffect. When passing handlers to event props, always pass a function reference or an arrow function, never a function call. Use the React DevTools Profiler to identify which component is re-rendering excessively.

Examples

JavaScript

Code that triggers the error

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  // calling setState directly during render triggers infinite re-renders
  setCount(count + 1);
  return <div>{count}</div>;
}

Error output

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

Fixed code

import { useState } from "react";

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

  // Move state updates into an event handler, not directly in the render body
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

JavaScript

Code that triggers the error

import { useState } from "react";

function Toggle() {
  const [open, setOpen] = useState(false);
  // passing the result of setOpen instead of a callback
  return <button onClick={setOpen(true)}>Open</button>;
}

Error output

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

Fixed code

import { useState } from "react";

function Toggle() {
  const [open, setOpen] = useState(false);
  // wrap in an arrow function so it only fires on click
  return <button onClick={() => setOpen(true)}>Open</button>;
}

Practice in English

How would you explain a Too many re-renders to a fellow dev? Choose the right phrase:

"I hit an error...

Ready to practice your English at work?

Lingua-e has interactive exercises built around real developer conversations: standups, code reviews, retrospectives, and more. Practice until it comes naturally.

Try Lingua-e for free