无冗余代码的React自定义Hook：Socket监听器闭包问题求解

这个场景我太熟悉了——本来想封装自定义Hook简化代码，结果因为闭包依赖的问题反而陷入两难，既要保持代码简洁又要避免不必要的监听器重复注册/注销。其实我们可以在自定义Hook内部处理回调的稳定性，完全不用让业务代码额外包裹useCallback，下面是具体实现方案：

核心思路：用useRef跟踪最新回调，分离依赖逻辑 #

我们可以借助useRef来保存最新的回调引用，让注册到Socket的监听函数始终调用最新的回调版本，同时保证useEffect的依赖只有event，避免因回调变化触发重复执行：

import { useEffect, useRef } from 'react';

const useListener = (event, callback) => {
  // 用ref存储最新的回调引用，不受重渲染影响
  const callbackRef = useRef(callback);

  // 每次组件重渲染时更新ref，确保始终拿到最新的回调
  useEffect(() => {
    callbackRef.current = callback;
  }, [callback]);

  // 这里的useEffect仅依赖event，注册一个稳定的监听函数
  useEffect(() => {
    // 包装一层handler，调用时始终使用ref中最新的回调
    const eventHandler = (...args) => callbackRef.current(...args);
    // 注册监听并获取销毁函数
    const cleanup = socketListen(event, eventHandler);
    
    return cleanup;
  }, [event]);
};

为什么这个方案有效？ #

• 回调更新不触发监听重注册：第一个useEffect会在每次回调变化时更新callbackRef.current，但这个过程不会触发监听的注销和重新注册，因为它的依赖只有callback，而第二个useEffect的依赖只有event，只有当事件名称变化时才会重新注册。
• 始终调用最新回调：注册到Socket的eventHandler是一个稳定的函数（不会随组件重渲染变化），它内部通过callbackRef.current调用最新的回调，所以即使组件状态更新，触发重渲染后，Socket事件触发时依然能拿到最新的setName等状态设置器，保证业务逻辑正确。
• 零业务代码冗余：你依然可以像最开始那样使用useListener，完全不需要给回调包裹useCallback：

  useListener('name', newName => setName(newName));
  

这个方案完美平衡了代码简洁性和功能正确性，不管你的回调逻辑有多复杂，都不用额外添加冗余代码，把回调稳定性的处理完全封装在自定义Hook内部。

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