在 React useEffect hook 中清理 Lodash debounce function

Question

I'm trying to use Lodash's Debounce function with a custom hook to prevent the window resize event from firing too often. Whilst the hook works as desired, I am struggling to properly cleanup in the function returned from the React useEffect hook. This results in the following error in the browser console as well as the event listener existing for the entirety of the users session in the single-page app.

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

I understand there are ways of rolling a custom debounce hook, but for the sake of this project that uses Lodash heavily I would prefer to stick with the Debounce function if possible.

function getSize() {
  return {
    width: window.innerWidth,
    height: window.innerHeight,
  };
}

export default function useWindowSize(debounceDelay = 500) {
  const [windowSize, setWindowSize] = useState(getSize);

  useEffect(() => {
    function handleResize() {
      setWindowSize(getSize());
    }

    const debounced = debounce(handleResize, debounceDelay);
    window.addEventListener(`resize`, debounced);

    return () => window.removeEventListener(`resize`, debounced.cancel());
  }, [debounceDelay]);

  return windowSize;
}

Answer 1

There is not need to pass debounce.cancel() . While removing the event listener you need to pass the same reference to the function that is used while creating the listener. You can also cancel the current debounced function.

useEffect(() => {
    function handleResize() {
      setWindowSize(getSize());
    }

    const debounced = debounce(handleResize, debounceDelay);
    window.addEventListener(`resize`, debounced);

    return () => {
         debounce.cancel()
         window.removeEventListener(`resize`, debounced); // use debounced directly
     }
  }, [debounceDelay]);

Answer 2

You're directly calling cancel function rather. You should just use debounced that's what added in your listener:

return () => {
  window.removeEventListener('resize', debounced)
}

In most cases, just removing the event is fine:

return () => {
  window.removeEventListener('resize')
}