React useMemo
React 中缓存计算结果的 Hook 及其与普通计算、useCallback 的边界。
#tech / dev / frame
#resource / react
#type / concept
#status / growing
[!info] related notes
- 所属 MOC: React MOC
- 上位主题: react-hooks, react
- 易混淆概念: react-use-callback, React 组件渲染与重渲染
React useMemo
useMemo 用于缓存某次计算的结果，避免在依赖没有变化时重复执行昂贵计算。
一句话定义
如果你关心的是“某个计算结果是否可以复用”，那是 useMemo 的职责。
最典型的两类用途
昂贵计算缓存
const visibleItems = useMemo(() => {
return filterItems(items, tab)
}, [items, tab])这适合大数组过滤、排序、复杂映射等真正有成本的计算。
保持引用稳定
const options = useMemo(() => ({ roomId }), [roomId])当这个对象要传给依赖引用稳定性的子组件或其他 Hook 时，这种写法才更有意义。
什么时候适合用
- 计算本身开销较大
- 结果要传给依赖引用稳定性的子组件
- 你明确知道重复计算会带来明显成本
什么时候不适合用
- 只是普通轻量计算
- 为了“看起来更专业”到处包一层 memo
- 结果根本没有被性能敏感链路使用
和普通计算的边界
大多数简单表达式直接算就够了，只有在确实存在重计算成本或引用稳定性需求时，才考虑 useMemo。
例如这类通常没必要：
const fullName = useMemo(() => firstName + ' ' + lastName, [firstName, lastName])直接写：
const fullName = firstName + ' ' + lastName和 useCallback 的区别
useMemo缓存的是值useCallback缓存的是函数引用
最大误区
不要把 useMemo 理解成“加了总比不加好”。
它也有成本：
- 依赖比较
- 心智负担
- 代码可读性下降
- 依赖写错后的 bug 风险
所以它不是默认优化，而是明确为某个收益付出的成本。
最短记忆方式
useMemo 解决的是“结果值是否值得缓存”，不是“所有计算都应该缓存”。