Function 未使用挂钩指向 state 变量的更新值

Question

I am currently refactoring a react app from setState to hooks. I can't understand why the state variables aren't changed. Here is an example:

import React, { useState, useEffect } from 'react';

function Hook() {
    const [num, setNum] = useState(1);

    useEffect(() => {
        window.addEventListener("mousemove", logNum);
    }, []);

    const logNum = () => {
        console.log(num);
    }
    const handleToggle = () => {
        if (num == 1) {
            console.log('setting num to 2');
            setNum(2);
        } else {
            console.log('setting num to 1');
            setNum(1);
        }
    }

    return (
        <div>
            <button onClick={handleToggle}>TOGGLE BOOL</button>
        </div>
    );
}
export default Hook;

When i click the button, I was expecting the output to be something like:

// 1
// setting num to 2
// 2
// setting num to 1
// 1

But the output look like this:

Why is the updated num variable not logged? Shouldn't the logNum() function always point to the current value of the state?

Answer 1

That's why effect dependencies have to be exhaustive . Don't lie about dependencies .

logNum closures over num , so on every rerender there is a new num variable containing the new value, and a new logNum function logging that value. Your effect however gets initialized only once, thus it only knows the first logNum . Therefore, you have to add logNum as a dependency, so that the effect gets updated whenever num and thus logNum changes:

 useEffect(() => {
    window.addEventListener("mousemove", logNum);
}, [logNum]);

You'll notice that your effect does not correctly clean up , you should add a removeEventListener too.

    return () => window.removeEventListener("mousemove", logNum);

Now if you debug this piece of code, you'll notice that the effect triggers on every rerender. That is because a new logNum function gets created on every rerender, no matter wether num changes or not. To prevent that, you can useuseCallback to make the logNum reference stable:

  const logNum = useCallback(() => console.log(num), [num]);

An alternative to all of this would be to use a reference to the current state :

  const actualNum = useRef(num);

    // that works no matter when and how this is executed
    console.log(actualNum.current);