如何优化useClickOutside自定义Hook？消除useCallback依赖的方案

问题背景 #

我编写了一个简单的useClickOutside自定义Hook，用来实现点击指定元素外部时触发回调的功能。当前实现能正常运行，但存在一个痛点：如果使用者没有用useCallback包装传入的回调函数，组件每次重渲染时，Hook内部的useEffect都会重复执行——原因是每次渲染时回调函数的引用都会变化，而它是useEffect的依赖项。

虽然用useCallback可以规避这个问题，但这相当于把额外的复杂度推给了使用者，而且无法阻止他们传入未包装的普通函数，导致不必要的性能损耗。有没有更优雅的方式，让Hook本身就能处理这个问题，不需要依赖useCallback？

当前的Hook实现：

function useClickOutside(handler) {
  const ref = useRef();

  useEffect(() => {
    const handleClick = (e) => {
      if(ref.current && !ref.current.contains(e.target)) {
        handler();
      }
    };

    document.addEventListener('click', handleClick);
    return () => {
      document.removeEventListener('click', handleClick);
    };
  }, [handler]);

  return ref;
}

解决方案：用Ref保存最新回调引用 #

核心思路是在Hook内部用一个ref存储最新的回调函数引用，不管外部传入的回调是否变化，事件处理逻辑都能拿到最新版本；同时让useEffect的依赖数组只包含稳定的引用，避免重复执行。

优化后的Hook代码：

function useClickOutside(handler) {
  const ref = useRef();
  // 用ref存储最新的handler，每次渲染都更新引用
  const handlerRef = useRef(handler);
  handlerRef.current = handler;

  useEffect(() => {
    const handleClick = (e) => {
      if (ref.current && !ref.current.contains(e.target)) {
        // 调用最新的回调函数
        handlerRef.current();
      }
    };

    document.addEventListener('click', handleClick);
    return () => {
      document.removeEventListener('click', handleClick);
    };
  }, [ref]); // ref的引用稳定，不会触发useEffect重复执行

  return ref;
}

方案说明 #

1. handlerRef的作用：每次Hook执行（组件渲染）时，都会把最新传入的handler赋值给handlerRef.current，确保事件触发时能调用到最新的回调函数，不受外部回调引用变化的影响。
2. 稳定的useEffect依赖：useEffect的依赖数组只包含ref，它由useRef创建，引用始终稳定，因此useEffect只会在组件挂载时绑定事件、卸载时解绑，不会因为回调变化而重复执行。
3. 使用者无额外负担：现在使用者可以直接传入普通函数，不需要用useCallback包装，Hook内部会自动维护最新的回调引用，同时避免了不必要的事件解绑/重绑定操作。

使用示例 #

function Example(props) {
  const menuRef = useClickOutside(() => {
      alert('You just clicked outside the menu.');
  });
  // 其他组件逻辑
  return (
    <div>
      <Menu ref={menuRef} />
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Mystical