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 · Accepted Answer · 2021-01-04 09:20:50Z

134

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.

edited Jan 4, 2021 at 9:20

answered Nov 10, 2018 at 20:40

Yangshun Tay

53.7k34 gold badges126 silver badges150 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Daniel Cooke Over a year ago

This is the solution, however if you are using the react-hooks eslint plugin. This would be flagged up by the exhaustive-deps rule. It would appear the correct solution is to use the useCallback hook, more discussion here: github.com/facebook/react/issues/14920#issuecomment-471070149

Rupali Yadav · Accepted Answer · 2023-04-25 17:57:30Z

5

You are running into a infinite loop because there is no dependency provided to the written useEffect.

To avoid an infinite loop when using the useEffect hook, make sure to provide a dependency array that includes all the variables that the effect depends on

For example, if you only want the effect to run once when the component mounts, you can pass an empty dependency array like this:

useEffect(() => {
   // effect code here
}, [])

If you want the effect to run whenever a specific variable changes, you can include that variable in the dependency array:

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

useEffect(() => {
  // effect code here
}, [count])

answered Apr 25, 2023 at 17:57

Rupali Yadav

1511 silver badge4 bronze badges

Collectives™ on Stack Overflow

React hook useEffect runs continuously forever/infinite loop

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related