我有一支技术全面、经验丰富的小型团队，专注高效交付中等规模外包项目，有需要外包项目的可以联系我

很多代码库到处都是 useCallback / useMemo。初衷是好的：减少不必要的重新渲染、稳定引用、提速。然而，用错场景或铺天盖地地包一层，往往只会带来样板代码、脆弱的依赖、以及几乎没有的收益。下面把常见误区、根因与替代方案一次讲清。

---

为什么大家老是手伸向 useCallback / useMemo？

• 想避免重复渲染：组件反复 render 看起来“慢”，于是希望“让引用稳定”来触发更少的 diff。

• 函数/对象每次 render 都是新引用：担心子组件比较不过，索性全都包一层。

• 期望优化，但缺少度量：没有 Profile 前置验证，拍脑袋优化极易南辕北辙。

然而，并非所有函数都需要“稳定”，尤其是子组件没有被 React.memo 包裹的时候；此外，依赖数组里塞不稳定的对象/函数，又会让 effect 次次触发——这就是陷阱的源头。

陷阱一：事件处理器的“过度稳定化”

很多人会无差别地把事件处理器包上 useCallback，期望“更稳更快”。但只有当子组件是 React.memo，稳定引用才有意义；否则根本不参与比较。

// ❌ 不要这样把临时对象和内联函数传给已 memo 的组件
function Meh() {return (<MemoizedComponentvalue={{ hello: 'world' }}onChange={(result) => console.log('result')}/>)
}// ✅ 需要稳定引用时，再用 useMemo / useCallback
function Okay() {const value = useMemo(() => ({ hello: 'world' }), [])const onChange = useCallback((result) => console.log(result), [])return <MemoizedComponent value={value} onChange={onChange} />
}

再看一个常见写法：

function MyButton() {const onClick = useCallback((event) => console.log(event.currentTarget.value),[])return <button onClick={onClick} />
}

这里按钮没有被 React.memo 包裹，因此传入的 onClick 是否“稳定”并不会改变渲染行为。而 useCallback 本身也要参与一次创建/比对，徒增复杂度——收益≈0。

小结：只有当“接收方”基于引用做浅比较（如 React.memo）时，稳定才有意义；否则纯属样板。

---

陷阱二：依赖数组 + Props，极易触发“连环反应”

当某个函数/对象被放入 useEffect 的依赖数组，React 会用 Object.is 做浅比较。只要引用不稳定，effect 就会每次 render 都重跑，从而抵消掉你以为的“稳定化”。

function OhNo({ onChange }) {const handleChange = useCallback((e: React.ChangeEvent) => {trackAnalytics('changeEvent', e)onChange?.(e)}, [onChange])return <SomeMemoizedComponent onChange={handleChange} />
}// 调用方：
<OhNo onChange={() => props.doSomething()} />

调用方把一个临时箭头函数传了进来，onChange 引用每次都不同，于是 handleChange 也被迫每次重建；结果是——你以为稳定了，其实全白搭。

再看一个更“真”的例子（热键）：

export function useHotkeys(hotkeys: Hotkey[]) {const onKeyDown = useCallback(() => { /* ... */ }, [hotkeys])useEffect(() => {document.addEventListener('keydown', onKeyDown)return () => document.removeEventListener('keydown', onKeyDown)}, [onKeyDown])
}

如果 hotkeys 是调用方每次都新建的数组，那 onKeyDown 就一定每次变化，事件监听也会每次解绑/重绑。把“稳定”的责任推给所有调用方，不仅脆弱，还难以排错。

结论：在依赖链里塞“会变”的引用，再多的 useCallback 都救不了；这不是性能优化，而是“反应式地雷”。

---

更靠谱的做法：Ref 持久化 + 渐进更新

一个实战稳定的模式是：用 ref 持有最新值，在 effect 中只绑定一次，处理逻辑里读取 ref。这样既保证处理器稳定，又能拿到最新数据。

export function useHotkeys(hotkeys: Hotkey[]) {// 1) 用 ref 持久化数据const hotkeysRef = useRef(hotkeys)// 2) 每次 render 同步最新值（不加依赖，始终最新）useEffect(() => {hotkeysRef.current = hotkeys})// 3) 稳定的处理器，不依赖外部变化const onKeyDown = useCallback((e: KeyboardEvent) => {const latest = hotkeysRef.current// ... 用 latest 做判断/匹配}, [])// 4) 只绑定一次监听器useEffect(() => {document.addEventListener('keydown', onKeyDown)return () => document.removeEventListener('keydown', onKeyDown)}, [])
}

• 因此，事件监听不会反复重绑；

• 同时，回调里读到的是最新hotkeys；

• 尽管如此，外层组件怎么传都不再牵动内部结构。

很多库（例如 React Query）在内部就采用类似思路：ref 驱动“读最新”，effect 驱动“只绑定一次”。

---

React 19 的原生解法：useEffectEvent（提案）

React 计划提供 useEffectEvent 来表达“非反应式事件”：回调引用稳定，内部总能读到最新值，且不会把依赖向外蔓延。

export function useHotkeys(hotkeys: Hotkey[]) {// onKeyDown 本身稳定，但其内部每次读取到的都是“最新 hotkeys”const onKeyDown = useEffectEvent((e: KeyboardEvent) => {// 使用 hotkeys，始终为最新})useEffect(() => {document.addEventListener('keydown', onKeyDown)return () => document.removeEventListener('keydown', onKeyDown)}, [])
}

• 于是，不必再手搓 ref；

• 而且，避免了“依赖数组失控”；

• 最后，事件回调既稳定又不陈旧，语义清晰。

---

什么时候该用，什么时候真别用？

可以用的场景（有实打实回报）：

1. 向 React.memo 子组件传参：确实需要稳定引用避免无意义重渲。

2. 昂贵计算的结果缓存：useMemo 封装重活，有测量再上。

3. 稳定的订阅/解绑回调：配合 ref / useEffectEvent，只绑一次。

应当避免的用法（基本白忙活）：

• 给未 memo 化的子组件一律包 useCallback。

• 把不稳定的对象/函数塞进依赖数组，导致effect 每次触发。

• 没有基准测试就“凭感觉”到处加 useMemo/useCallback。

简单决策树：

• 子组件 不是React.memo → 别为了“稳定”而稳定。

• 依赖链中存在临时引用 → 用 ref/useEffectEvent，消除连锁依赖。

• 计算确实重且被复用 → useMemo，并用 Profile 证明。

---

关键要点回看

• useCallback 不是银弹；在缺少 React.memo 或依赖不稳时，它只会徒增复杂度。

• 依赖数组的稳定性 > 回调的“看起来稳定”；错位的稳定会让 effect 每次重跑。

• Ref + 一次性绑定（或 useEffectEvent）是事件类场景的更健壮模式。

• 先测量再优化：用 DevTools Profiler/why-did-you-render 等工具，用数据说话，再决定是否上 useMemo / useCallback。

---

Final Takeaway

今天系统梳理了为何 useCallback/useMemo常常事与愿违，以及如何用 ref 持久化 + 一次性绑定（或即将到来的 useEffectEvent）更直接地解决问题。优化要以稳定的依赖链为前提，而不是到处包一层“看起来更专业”的 Hook。

前端AI·探索：涵盖动效、React Hooks、Vue 技巧、LLM 应用、Python 脚本等专栏，案例驱动实战学习，点击二维码了解更多详情。

最后：

深入React:从基础到最佳实践完整攻略

python 技巧精讲

React Hook 深入浅出

CSS技巧与案例详解

vue2与vue3技巧合集