如何优化函数以不收听React中无用的点击？

Question

我有一个自定义挂钩以收听外部单击：

import {useffect，useref，useref，mutableRefobject}我从'react'

function useOnClickOutside(ref: MutableRefObject<HTMLElement | undefined>, handler: (ev: MouseEvent | TouchEvent) => void) {
  useEffect(
    () => {
      const listener = (event: MouseEvent | TouchEvent) => {
        // Do nothing if clicking ref's element or descendent elements
        if (!ref.current || (event.target instanceof HTMLElement && ref.current.contains(event.target))) {
          return;
        }
        handler(event);
      };
      document.addEventListener("mousedown", listener);
      document.addEventListener("touchstart", listener);
      return () => {
        document.removeEventListener("mousedown", listener);
        document.removeEventListener("touchstart", listener);
      };
    },
    [ref, handler]
  );
}

我使用它在每个页面中可用的组件中使用它，而对于处理程序，只需传递（）=＆gt; {setClose（true）}

如何在组件或钩子本身中优化它，以避免聆听与任何不同的无用点击。