Javascript 在 React Hook 中使用 setInterval() 关闭

Question

In the following example, I expect the count value will increase in console as in UI. However, it doesn't, the value is always 0, but the value increase in UI. I know the issue might be related to Javascript Closure. In my understanding, the count should refer to the value in useState . Since the count is updated by setCount , the value keeps increase. However, why it doesn't increase in the log? Demo: https://codesandbox.io/s/gallant-fermat-42lxq?file=/src/App.js

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

  function innerFunction() {
    return () => {
      console.log("count: ", count);
      setCount(c => c + 1);
    };
  }

  useEffect(() => {
    const id = setInterval(innerFunction(), 1000);
    return () => clearInterval(id);
  }, []);
  return <h1>{count}</h1>;
}

Answer 1

The problem is that inside the setInterval callback, the value of count does not change, because we've created a closure with the value of count set to 0 as it was when the effect callback ran

At first render, the closure log() captures count variable as 0. Later, even if count increases, log() still uses count as 0 from initial render. log() is a stale closure.

The solution is to let know useEffect() that the closure log() depends on count and properly handle the reset of interval:

Add count as dependency in useEffect

useEffect(() => {
    const id = setInterval(innerFunction(), 1000);
    return () => clearInterval(id);
  }, [count]);

With the dependencies properly set, useEffect() updates the closure as soon as count changes.

Explanation

In the absence of dependencies , useEffect() is called only initially. It will not be re-called.

 useEffect(() => {
    console.log("is re-rendering");
    const id = setInterval(innerFunction(), 1000);
    return () => clearInterval(id);
  }, []);

Here, " is re-rendering " is logged only once.

If you use this syntax for setting state instead of functional syntax(which fetch latest count state). It also shows behavior as log as stale closure

setCount( count + 1); //always 1 as it gets 0 as count value

Since useEffect is not called after count changes, they take same initial input and give same initial output as they doesnot know about a changes.

If we add count as dependency then useEffect is re-called whenever count value changes and setInterval is also re-initialized with new updated input.

More Info

https://dmitripavlutin.com/react-hooks-stale-closures/

https://reactjs.org/docs/hooks-faq.html#what-can-i-do-if-my-effect-dependencies-change-too-often

Example

I have shown a similar issue with simple example.

Here,I have changed the value of outerVar(let us consider it is like a count state) after first calling outerfn.

But its updated changes is not reflected. This is how closure work.

 let outerVar='initial-outer' function outerfn(outerVar){ return function innerfn(innerVar){ console.log('outer variable: '+ outerVar) console.log('inner variable: '+ innerVar) } } let newfn=outerfn(outerVar) outerVar="updated-outer" // outerVal is now changed newfn('inside') // but initial outerVal is printed here newfn=outerfn(outerVar)//resetting closure with updated value (like adding dependency to useEffect) newfn('inside') // updated outerVal is printed now