5 Jul 2021

3 ways to cause an infinite loop in React

Have you spent some time trying to debug an infinite loop in React? Maybe you've hung your browser a couple of times in the process. Or encountered one of these 👇

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

Here are 3 potential causes of infinite loops in React.

I. Updating the state inside the render

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

  setCount(1); // infinite loop

  return ...
}

If you update the state directly inside your render method or the body of a functional component, it will cause an infinite loop.

State updates → triggers re-render → state updates → triggers re-render → and so on...

Fix 🎉

If you want to update a state only once when the component mounts, use useEffect with an empty array as a dependency.

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

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


  return ...
}

II. Infinite loop in useEffect

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

  useEffect(() => {
    setCount(count + 1) // infinite loop
  }, [count])

  return ...
}

If you keep updating a state inside useEffect with a property you update set as a dependency, it will cause an infinite loop.

count updates → useEffect detects updated dependency → count updates → useEffect detects updated dependency → and so on...

Fix 🎉

If you want to update a state based on its previous value, use a functional update. This way, you can remove the state property from the dependency list and prevent an infinite loop.

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

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

  return ...
}

III. Incorrectly set event handlers

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

  return (
    <button onClick={setCount(1)}>Submit</button> // infinite loop
  );
}

This is not the right way to set event handlers. You need to provide a function to onClick, not the result of the function execution. By executing a function before setting a handler, you update the state inside the render, which causes an infinite loop.

State updates → triggers re-render → state updates → triggers re-render → and so on...

Fix 🎉

Set a function to the onClick event. This is the proper way to set event handlers. This way, the state will only update after a button click and won't cause an infinite loop.

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

  return (
    <button onClick={() => setCount(1)}>Submit</button> // infinite loop
  );
}

How to spot infinite loops

Every time you update a state, picture the sequence of events that will happen after the update. If, without additional user interaction, this sequence leads you back to the same state update, you likely have an infinite loop.