What is a Too many re-renders? | Lingua-e

← Errors

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.

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.

How to fix it

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.

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.

How to fix it

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>;
}

Related errors

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