带有回调的自定义 React Hook 正在关闭

Question

What I am trying to achieve is a custom hook that calls a callback on particular keypress. The thing is that the callback is dependant on component prop. Unfortunately callback is passed to the hook only once and it makes closure on prop value.

Hook Code:

export default function useKeyPress(targetKey, callback) {
  const keyPressedHandler = ({ key }) => {
    if (key === targetKey && callback && typeof callback === 'function') {
      callback();
    }
  };

  useEffect(() => {
    window.addEventListener('keyup', keyPressedHandler);
    return () => {
      window.removeEventListener('keyup', keyPressedHandler);
    };
  }, []);
}

Component that uses a hook:

const Component = ({ isActive }) => {
  // isActive is changing here
  useKeyPress('ArrowRight', () => {
    if (isActive) // isActive always has the initial value 
      // do something if isActive is true
  });
}

How can I rewrite my hook or how should I handle this kind of situation?

Answer 1

I have reproduced the issue on Codepen https://codepen.io/tedseds/pen/oNXzvoK

When you press arrow right it always logs isActive as false even when the prop is changed.

Solution https://codepen.io/tedseds/pen/ZEGpzPm

You need to pass prop callback as a dependancy to the useEffect . It will reattach the event listener with the latest callback.

Code:

function useKeyPress(targetKey, callback) {
  const keyPressedHandler = ({ key }) => {
    if (key === targetKey && callback && typeof callback === "function") {
      callback();
    }
  };

  useEffect(() => {
    window.addEventListener("keyup", keyPressedHandler);
    return () => {
      window.removeEventListener("keyup", keyPressedHandler);
    };
  }, [callback]);
}