How the returned function is not destroying event listener in useEffect?

user_17523789 0
Viewed 133

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;
react-hooks reactjs javascript
4 Answers

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).

user_152886410

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.

user_161165060

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. More reading.

user_39630670

try code:

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

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