如何读取事件侦听器内的状态？

Question

I have the following code:

//...
    const [ scale, setScale ] = useState(0.5);

    const [ altPressed, setAltPressed ] = useState(false);

    const handleScroll = ({ deltaY }) => {
        if (altPressed) {
            const newScale = scale + deltaY;

            setScale(newScale);
        }
    };

    const handleKeyPress = ({ altKey }) => {
        if (altKey) {
            setAltPressed(true);
        }
    };

    const handleKeyRelease = ({ altKey }) => {
        if (!altKey) {
            setAltPressed(false);
        }
    };

    useEffect(() => {
        window.addEventListener("wheel", handleScroll);
        window.addEventListener("keydown", handleKeyPress);
        window.addEventListener("keyup", handleKeyRelease);
    }, []);
//...

But unfortunately handleScroll always read the initial state of altPressed , which is false, even though the keyboard event listeners are working fine, and setting the states correctly.

How to solve this issue so it will always read the fresh state?

Answer 1

One way to go about it is to make your effect depend on altPressed , so that the event listeners will be recreated when it changes. You must make sure you remove the event listeners in a function returned from the function given to useEffect as well so you don't get any duplicated listeners or memory leaks.

useEffect(() => {
  window.addEventListener("wheel", handleScroll);
  window.addEventListener("keydown", handleKeyPress);
  window.addEventListener("keyup", handleKeyRelease);

  return () => {
    window.removeEventListener("wheel", handleScroll);
    window.removeEventListener("keydown", handleKeyPress);
    window.removeEventListener("keyup", handleKeyRelease);
  };
}, [altPressed]);