React 19: "Too many re-renders", the infinite loop error explained

You change a couple of lines, save, and the browser freezes for a second before dumping this in the console:

The message tells you React caught itself in a loop before your tab actually crashed — that’s the good news. The bad news is it doesn’t tell you which line caused it. Almost always, the culprit is one of two patterns, both easy to write by accident.

Cause #1: calling setState directly in the render body

This is the classic case, and it looks deceptively reasonable at first glance:

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

  // Runs on every render — including the one it just triggered
  setCount(count + 1);

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

Every call to setCount schedules a re-render. That re-render runs the component body again, which calls setCount again, which schedules another re-render — forever. React’s render function must be pure: it can read state, but it can’t write it unconditionally as part of rendering.

The fix is almost always to move the state update into an event handler or an effect that runs only when something specific changes:

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

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

Cause #2: an object or array recreated on every render as a dependency

This one is sneakier because the setState call is safely tucked inside a useEffect, which feels correct:

function SearchResults({ query }) {
  const [results, setResults] = useState([]);

  // New object on every render!
  const options = { limit: 10, query };

  useEffect(() => {
    fetchResults(options).then(setResults);
  }, [options]); // options is never === to the previous options

  return (
    <ul>
      {results.map((r) => (
        <li key={r.id}>{r.text}</li>
      ))}
    </ul>
  );
}

options is a brand-new object literal on every render, so it never equals the previous one by reference. React re-runs the effect every time, the effect calls setResults, which triggers a re-render, which creates a new options object — an infinite loop, just one hop removed from cause #1.

Two ways to fix it:

// Option A: depend on the primitive values, not the object
useEffect(() => {
  fetchResults({ limit: 10, query }).then(setResults);
}, [query]);

// Option B: memoize the object itself
const options = useMemo(() => ({ limit: 10, query }), [query]);
useEffect(() => {
  fetchResults(options).then(setResults);
}, [options]);

Option A is usually simpler and is what I’d reach for first — depend on the raw values that actually change, and construct the object inside the effect where its identity doesn’t matter.

How to actually find the offending line

The error message alone won’t point at your code, but two tools will:

• React’s own overlay in development usually includes a component stack right below the error — read it top to bottom, the first component you wrote (not a library wrapper) is your best starting point.
• Comment out state updates one at a time. Sounds crude, but for a loop with multiple useEffect/useState pairs in the same component, temporarily disabling each setX call until the loop stops is often faster than reading generated stack traces.

FAQ

Conclusion

“Too many re-renders” always traces back to a state update that fires unconditionally, whether that’s a setState call sitting directly in the render body, or one hidden inside an effect whose dependency is recreated on every render. Once you know to look for those two shapes specifically, the fix is usually a one-line change — the hard part is just spotting which of your useState/useEffect pairs is the one doing it.

References

• useState — “Too many re-renders” (React documentation)

• useEffect – React documentation