为何用Ref配合useCallback？解析useCallback地狱及该写法优势

什么是"useCallback地狱"？ #

直接使用useCallback时，为了保证回调函数的引用稳定，你必须把回调内部用到的所有状态、props、甚至其他回调函数都放进依赖数组里。但一旦这些依赖项发生变化，useCallback返回的函数引用就会更新。更糟的是，如果这个回调又被作为依赖传给另一个useCallback或useEffect，就会引发连锁反应——你得一层层手动添加所有依赖，代码变得臃肿不堪，维护成本直线上升，这种场景就是所谓的"useCallback地狱"。

useEventCallback的优势 #

这个自定义Hook的核心是用ref存储最新的回调逻辑，同时返回一个引用永远稳定的包装函数，解决了直接用useCallback的痛点：

• 引用绝对稳定：返回的函数通过useCallback([], [])创建，依赖为空数组，所以它的引用永远不会变。传给子组件或其他Hook时，不会触发不必要的重渲染或副作用执行。
• 无需手动管理依赖：每次组件渲染时，useEffect会自动把最新的handler同步到ref中，调用包装函数时总能拿到最新的业务逻辑，不会出现闭包捕获过时值的问题。
• 简化代码结构：不用再为了维持useCallback稳定而堆砌大量依赖项，避免了层层传递依赖的繁琐操作。

代码逻辑解析 #

来看你提供的代码：

// Saves incoming handler to the ref in order to avoid "useCallback hell"
export function useEventCallback<T, K>(handler?: (value: T, event: K) => void): (value: T, event: K) => void {
  const callbackRef = useRef(handler);

  useEffect(() => {
    callbackRef.current = handler;
  });

  return useCallback((value: T, event: K) => callbackRef.current && callbackRef.current(value, event), []);
}

1. callbackRef：用来存储最新的传入handler，确保随时能拿到最新的回调逻辑。
2. useEffect：没有设置依赖数组，意味着每次组件渲染都会更新callbackRef.current为最新的handler。
3. 返回的包装函数：通过useCallback创建且依赖为空，所以引用永远不变。调用时会执行callbackRef.current里的最新handler，兼顾了引用稳定和逻辑最新的需求。

对比直接用useCallback的场景：如果直接写useCallback((v, e) => handler(v, e), [handler])，只要handler的引用变化（比如组件内部定义的handler用到了状态，状态更新时handler会重新创建），这个回调的引用就会变，进而可能引发子组件重渲染或其他Hook的不必要执行。

内容的提问来源于stack exchange，提问作者김경한