React自定义hook中函数参数的memoize位置选择与优化方案

原方案问题修正 #

你给出的方案1中存在注释错误：useCallback的依赖为callbackRef，而useRef返回的对象在整个hook生命周期内引用永远稳定，因此callbackWrapper实际上永远不会重新创建，本身就可以实现不需要用户手动包裹useCallback的效果，仅需要略微优化写法即可投入生产使用。

最优实现方案 #

你可以直接在自定义hook内部封装稳定引用的回调包装逻辑，完全不需要使用者处理memo操作，标准实现如下：

const useCustomHook = (callback) => {
  const callbackRef = useRef();
  // 渲染阶段直接更新ref指向最新传入的回调，无副作用，保证永远拿到最新的函数实例
  callbackRef.current = callback;

  // 依赖为空数组，返回的包装函数引用永远稳定
  const stableCallback = useCallback((...args) => {
    // 调用时执行最新的回调，透传所有参数和返回值
    return callbackRef.current?.(...args);
  }, []);

  // 后续hook内部所有需要用到回调的场景，统一使用stableCallback即可
  // 示例：绑定事件、作为effect依赖、返回给组件使用等
  useEffect(() => {
    window.addEventListener('resize', stableCallback);
    return () => window.removeEventListener('resize', stableCallback);
  }, [stableCallback]) // stableCallback引用永远稳定，effect只会执行一次
}

// 使用者侧代码，不需要做任何memo处理，直接传函数即可
const Component = () => {
  useCustomHook(() => {
    console.log(`I'm being passed to the hook`);
  });

  return <div></div>;
}

方案优势 #

1. 无使用成本：使用者不需要手动用useCallback包裹传入的函数，哪怕每次渲染传入新的函数实例也不会影响逻辑和性能
2. 无闭包陷阱：每次调用stableCallback都会执行最新传入的回调，永远能拿到最新的组件状态
3. 性能最优：stableCallback引用永远稳定，不会触发hook内部的useEffect、useMemo等逻辑重复执行

原方案2的问题解答 #

• 方案2的用法完全符合React语法规范，但会显著增加使用者的心智负担，一旦使用者忘记包裹useCallback，很容易出现性能问题或逻辑bug，不推荐
• 上述给出的实现完全可以替代方案2，兼顾易用性和稳定性

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