每次调用反应钩子时都会添加一个事件侦听器吗？

Question

Let's say I have a react hook that listens to an event like resize on the window object.

I want to know if every time I use the hook in some components all over the application I'm also adding a different event listener on window .

If the answer is yes, then i suppose this will be bad for performances, how can i avoid it?

Here's an example of the hook i want to implement:

export const useMediaQuery = (): ReturnObject => {
  const [desktop, setDesktop] = useState(false);
  const getViewport = (): void => {
    setDesktop(window.matchMedia(desktopQuery).matches);
  };

  useEffect(() => {
    getViewport();
    const listener = (): void => getViewport();
    window.addEventListener('resize', listener);
    return (): void => window.removeEventListener('resize', listener);
  }, []);

  return {
    deviceType: desktop ? DeviceType.Desktop : DeviceType.Mobile,
  };
};

Answer 1

when you use custom hooks , React will allocate a new piece of memory for that component to use that custom hook.

so, I think the answer is YES