React useCallback 和 useMemo 什么时候真的有用？

很多人刚学 hooks 就开始到处加 useCallback/useMemo，以为这样能优化性能。但实际上大多数时候是在做无用功，甚至拖慢了渲染。

先搞清楚它们做什么

• useMemo(fn, deps)：缓存计算结果，deps 不变就不重新计算
• useCallback(fn, deps)：缓存函数引用，deps 不变就返回同一个函数对象

两者的核心都是”缓存”，代价是每次渲染都要比较 deps 数组。

什么时候有用

useMemo 有用的场景：

1. 计算量大的纯函数（比如对大数组排序/过滤）
2. 作为其他 hook 的依赖（避免引用变化触发无限循环）

useCallback 有用的场景：

1. 传给用 React.memo 包裹的子组件的回调
2. 作为 useEffect 的依赖

什么时候没用

• 普通子组件（没有 React.memo）：父组件重渲染子组件一定重渲染，缓存函数没意义
• 计算很简单的值：比较 deps 的开销 > 重新计算的开销

一个判断标准

先不加，profiler 发现有问题再加。过早优化是万恶之源。