React 中全量使用 useCallback 钩子是否合理？收益是否大于开销？
首先直接回答你的核心问题：你这个示例场景下，用useCallback没有任何合理依据，属于典型的过度优化。
你在实验中没看到useCallback带来收益，核心原因是你搞错了useCallback生效的前置条件：useCallback只有配合被React.memo包裹的自定义子组件使用时，才有机会避免不必要的重渲染。
先给你捋清楚React的基础渲染逻辑：
默认情况下，只要父组件触发重渲染，它的所有子组件都会跟着走完整的渲染流程，不管子组件的props有没有变化。这个规则对React内置的原生DOM组件（比如你用的<button>）也成立，你觉得C、D按钮没有重渲染，只是因为原生DOM组件的虚拟DOM diff开销极低，且实际DOM更新被React优化跳过了，你感知不到而已，不代表它们没有走渲染流程。
React.memo的作用就是给子组件加一层缓存：只有子组件的props发生浅对比变化的时候，才会触发子组件的重渲染。这时候如果传给子组件的回调是每次渲染都新生成的函数，哪怕函数逻辑完全一样，浅对比也会认为props变了，子组件还是会重渲染——这才是useCallback的作用场景：把回调函数缓存下来，依赖不变的话每次返回同一个引用，让memo的浅对比能通过，从而真正跳过子组件的重渲染。
再回到你的实验看问题：
你直接把回调传给原生<button>，根本没有用memo包裹的自定义子组件，这种情况下用不用useCallback，最终的渲染开销几乎没有区别，反而还要承担两部分额外成本：
- 每次渲染都要执行
useCallback的钩子逻辑、对比依赖数组的开销（虽然很小，但没必要） - 后续维护代码时要额外关注依赖数组是否正确的心智成本
你实验里的按钮E的写法反而才是最优的：如果回调不需要依赖组件内部的state、props，直接定义在组件外部，永远不会生成新的函数，比useCallback的开销还要低。
关于怎么判断要不要用useCallback：
不要上来就给所有回调包useCallback，所有缓存机制都有开销，只有收益大于开销的时候才值得用。正确的判断逻辑应该是：
- 先正常写代码，不要提前加
useCallback - 出现明显的性能问题后，用React DevTools的渲染高亮功能，排查是不是某个复杂子组件的频繁不必要重渲染导致的
- 确认问题后，先给子组件加
React.memo，再给传给它的回调加useCallback，做完后再验证性能是不是真的有提升
目前行业里这种不加区分全用useCallback的写法，确实属于你说的cargo cult编程：大家只记住了“useCallback可以避免子组件重渲染”的半句结论，忘了它生效的两个必要前提——子组件被memo包裹、子组件的渲染开销足够大到值得优化，平白增加了很多不必要的维护成本。
内容的提问来源于stack exchange，提问作者customcommander
