React hook useEffect runs continuously forever/infinite loop

Question

I'm trying out the new React Hooks's useEffect API and it seems to keep running forever, in an infinite loop! I only want the callback in useEffect to run once. Here's my code for reference:

Click "Run code snippet" to see the "Run useEffect" string is being printed to the console infinitely.

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

  React.useEffect(() => {
    console.log('Run useEffect');
    setCount(100);
  });

  return (
    <div>
      <p>Count: {count}</p>
    </div>
  );
}

ReactDOM.render(<Counter />, document.querySelector('#app'));

<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

<div id="app"></div>

Yangshun Tay Yangshun Tay · Accepted Answer · 2018-11-10T20:40:37

This happens because useEffect is triggered after every render, which is the invocation of the Counter() function in this case of functional components. When you do a setX call returned from useState in a useEffect, React will render that component again, and useEffect will run again. This causes an infinite loop:

Counter() → useEffect() → setCount() → Counter() → useEffect() → ... (loop)

To make your useEffect run only once, pass an empty array [] as the second argument, as seen in the revised snippet below.

The intention of the second argument is to tell React when any of the values in the array argument changes:

useEffect(() => {
  setCount(100);
}, [count]); // Only re-run the effect if count changes

You could pass in any number of values into the array and useEffect will only run when any one of the values change. By passing in an empty array, we're telling React not to track any changes, only run once, effectively simulating componentDidMount.

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

  React.useEffect(() => {
    console.log('Run useEffect');
    setCount(100);
  }, []);

  return (
    <div>
      <p>Count: {count}</p>
    </div>
  );
}

ReactDOM.render(<Counter />, document.querySelector('#app'));

<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

<div id="app"></div>

Read up more about useEffect.

React hook useEffect runs continuously forever/infinite loop

1 Answers