除传递给React.memo缓存组件外，useCallback还有何用途？

你说得没错——每次渲染时，useCallback包裹的内联函数确实会被创建，useCallback本身也会执行判断逻辑，决定返回缓存的旧函数还是新创建的函数。它的核心作用不是避免函数创建，而是稳定函数的引用地址，单独使用它的合理场景主要集中在以下几个方面：

• 作为其他Hook的依赖项
  比如在useEffect、useMemo这类依赖数组驱动的Hook中，如果依赖是一个函数，不通过useCallback缓存的话，每次渲染函数引用都会变化，导致Hook重复执行。举个例子：

  // 不使用useCallback的情况
  const handleResize = () => {
    console.log(window.innerWidth);
  };
  
  useEffect(() => {
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, [handleResize]);
  

  这里每次渲染handleResize都是新函数，useEffect会反复执行解绑再绑定的操作，不仅没必要，还可能带来额外开销。用useCallback缓存后，只要依赖数组不变，函数引用就稳定，useEffect只会在组件挂载和依赖变化时执行一次。

• 用于需要稳定引用的异步/定时逻辑
  比如setInterval、setTimeout或者一些订阅类逻辑中，回调函数的引用变化可能导致逻辑混乱。比如一个倒计时功能，如果每次渲染回调函数都是新的，可能会导致定时器被反复重置；而缓存后的函数引用稳定，能保证定时器始终使用同一个回调逻辑。

• 避免某些第三方库的不必要更新
  部分第三方库会根据传入的函数引用来判断是否重新执行逻辑（类似React.memo的逻辑），这时候稳定的函数引用可以避免库内部的不必要计算或状态更新。

关于性能优化的误区 #

你提到的“避免每次渲染创建函数来提升性能”其实是个常见误区——JavaScript创建函数的开销极小，大部分场景下，这种优化带来的收益远小于useCallback本身的判断成本。只有当函数内部逻辑非常复杂，且渲染频率极高时，稳定引用带来的间接优化（比如避免依赖它的Hook重复执行）才会体现价值，但这种场景非常少见。

总结来说，单独使用useCallback不是误解，而是针对稳定函数引用需求的解决方案，核心价值在于避免依赖该函数的逻辑出现不必要的重复执行或逻辑错误，而非单纯“减少函数创建”。

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