#优质博文 #前端 #React #JavaScript #性能优化
The Useless useCallback

AI 摘要:本文深入探讨了 React 的 useCallback(及部分 useMemo)在许多开发实践中被滥用、实际无效甚至带来额外复杂性的现象。作者指出,只有在需要“引用稳定性”(referential stability)时才有必要使用 memoization(记忆化),但多数情况下由于组件、props 或 state 的传递与依赖管理不当,memoization 实际无法带来性能提升,甚至反而让代码维护变得困难。作者以真实项目为例,分析了 memoization 的链式依赖是如何轻易被打破,进而推荐采用最新引用(Latest Ref Pattern)和即将推出的 useEffectEvent 方案来简化副作用依赖管理。

1. 记忆化的真正动机
• 只有两大理由:性能优化、降低副作用(effect)频繁触发。
• 核心是保持“引用稳定性”,以防止不必要的重新渲染或副作用。

2. 错误/无用的 useCallback 场景分析
• 如果目标组件本身未被 React.memo 包裹,useCallback/useMemo 完全无效。
• 组件自身如果不关心 props 的引用稳定性,多余的 memoization 没有任何作用,例如原生 button 的事件处理。
• 不应将传入的非原始 props 用作内部依赖(dependency array),因为无法控制其稳定性。

3. 真实工作中链式 memoization 失效的例子
• 多层 useMemo/useCallback、props 层层传递,一旦其中任意一环未 memoize,所有下游优化失效。
• 该问题不仅无法通过“层层 memoize”彻底修复,反而增加了理解和维护的负担,导致开发者难以溯源、清理无用优化。

4. 新的依赖管理模式推荐
• 最新引用(Latest Ref Pattern):通过 useRef 保存当前最新值,通过 effect 始终同步,无需被动依赖。
• useEffectEvent(即将推出的 React 原生特性):可直接在副作用 effect 内安全访问最新 props/state,无需显性依赖。

5. 结论与建议
• 仅在确有必要的场景使用 useCallback/useMemo,切勿滥用。
• 优先采用更健壮的依赖管理模式,减少人为记忆化的复杂性,提升组件可维护性和开发体验。


author Dominik Dorfmeister The Useless useCallback
 
 
Back to Top