React中count引发重渲染时，useCallback包裹的回调是否重建？

示例代码 #

const App = () => {
   const [name,setName] = useState('')
   const [count,setCount] = useState(0)
   const fn = useCallback(() => {
      console.log("I'm a callback")
   },[name])
   return <div onClick = {() => setCount(count => count + 1)}>{count}</div>
}

问题与选项 #

当count变化引发组件重渲染时，被useCallback包裹的回调函数是否会被重建？以下哪种情况符合实际？

• 1. 当重渲染由count变化引发时，回调永远不会被重建，fn始终是最初的回调本身。
• 2. 只要组件发生重渲染，回调就会被重建。重渲染意味着App函数被再次调用，代码会重新执行，因此每次重渲染都会生成新的回调函数。但由于依赖项name未发生变化，useCallback Hook仍会返回之前的回调。

结论与解释 #

正确答案是选项2。

组件重渲染的本质是函数组件的函数体被重新执行，所以每次重渲染时，useCallback内部定义的箭头函数都会被全新创建。但useCallback的核心作用是缓存回调引用：当依赖数组中的值未发生变化时，它会返回上一次缓存的旧回调函数，而非本次新建的函数。只有当依赖项更新时，useCallback才会替换缓存，返回新创建的回调。

在这个示例中，count变化触发重渲染时，虽然每次都会生成新的回调函数，但因为name始终未变，useCallback会返回之前缓存的旧回调，所以fn的引用保持不变。

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