返回的 function 如何不破坏 useEffect 中的事件监听器？

Question

I made this custom hook to get window width. It is working but I have a question. I used useEffect to add event listener to window at component mount. But then my friend suggested me to use return function to remove the event listener. How this is working? Shouldn't the returned function destroy the event listener and make it not work? Since this is happing one time on component mount?

import React from "react";

const useWindowSize = () => {
  const [windowSize, setWindowSize] = React.useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });
  const windowResize = () => {
    setWindowSize({
      width: window.innerWidth,
      height: window.innerHeight,
    });
  };
  React.useEffect(() => {
    window.addEventListener("resize", windowResize);
    return () => {
      window.removeEventListener("resize", windowResize);
    };
  }, []);
  return windowSize;
};

export default useWindowSize;

Answer 1

The returned function inside the useEffect gets executed just before your component gets unmounted. It is not executed on mount.

Without this returned function, every time your component re-renders, if you hadn't that empty array dependency, and when it gets unmounted and mounted, a new EventListener is added in memory (which is bad).

Answer 2

This callback in return of useEffect is called on unmount . Which means that eventListener is removed when your component is no longer rendered, or when its "remounted" (key prop was changed). This is important because without removing event listener, there will be several same eventListeners hooked at the same time.

Answer 3

shouldn't return function destroy event listener and make it not work? since this is happing one time on component mount?

The return function will be executed in your case when the component using the hook unmounts (because of empty array as dependencies). So at that time it makes sense to unregister the listener I suppose. Morereading .

Answer 4

try code:

    const windowResize = useCallback(event => {
        setWindowSize({
            width: window.innerWidth,
            height: window.innerHeight,
        });
    }, []);

    useEffect(() => {
        window.addEventListener("keydown", windowResize);
        return () => {
            window.removeEventListener("keydown", windowResize);
        };
    }, [windowResize]);