React 钩子 state 中的奇怪行为与 setInterval() 结合更新

Question

The below code correctly updates the count state, but when outputting the count value with console.log, it is showing very strange behavior if called from a function within an setInterval inside useEffect() hook.

You would expect to see an incremental number in the console.log but the output from the fetchTimelineItems() function is bizar. When the count is 1, the output alternates between 0 and 1. When the count is 2 or more it outputs all the numbers in random order.

See codesandbox link to reproduce this behavior.

The expected behavior is to see the correct count value in the fetchTimelineItems() function.

Thanks in advance for pointing me in the right direction to get this fixed.

const Example = ({ title }) => {
  const [count, setCount] = useState(0);

  const handleCount = () => {
    setCount(count + 1);
    console.log(count);
  };

  function fetchTimelineItems() {
    console.log("count from within fetch function: " + count);
  }
  
  useEffect(() => {
    setInterval(() => {
      fetchTimelineItems();
    }, 3000)
  },[count]);

  

  return (
    <div>
      <p>{title}</p>
      <button onClick={handleCount}>Increase count</button>
    </div>
  );
};

https://codesandbox.io/s/count-update-s5z94?file=/src/index.js

Answer 1

The useEffect hooks, runs after mounting and updating (depending on your dependency array) of your functional component.

So, it keeps running whenever you update your count .

Now, once you update count for the first time, the useEffect will again run, thus creating a new Interval because of setInterval . This is why you have multiple output statement.

Now, finally, each Interval you create is creating what is called a closure inside it. Inside this closure there is the fetchTimelineItems function along the value of count at that point of time.

So, for every update of count you are creating new intervals like this.

Mount -> Closure with fetchTimelineItems and count = 0,
Update count once -> Closure with fetchTimelineItems and count = 1,
Update count again -> Closure with fetchTimelineItems and count = 2,

This is why you have all the values printing in the console. Why it is printing old values is because that's how closures work in javascript. They remember the values at the time of their creation.