您应该何时使用 useMemo 和 useCallback，它们解决了什么问题？

Question

Accepted Answer

两者都在渲染之间缓存某些内容，以便每次都不会重新计算/重新创建：
- **`useMemo`** 缓存一个**计算值**。
- **`useCallback`** 缓存一个**函数的标识**（它是 `useMemo(() => fn, deps)`）。

它们的存在是为了避免 (a) 重复执行昂贵的工作和 (b) 破坏 memoized 子组件所依赖的引用相等性。

```jsx
function Table({ rows, onSelect }) {
  // (a) expensive computation — recompute only when `rows` changes
  const sorted = useMemo(() => rows.slice().sort(byName), [rows]);

// (b) stable function identity — so a React.memo child doesn't re-render,
  //     and effects depending on it don't re-fire
  const handleSelect = useCallback(id => onSelect(id), [onSelect]);

return <Grid rows={sorted} onSelect={handleSelect} />;
}
```

## 为什么这很重要

没有 `useCallback` 的情况下，`handleSelect` 在每次渲染时都是全新的函数。`React.memo(Grid)` 会看到一个"新的" prop 并仍然重新渲染，从而破坏 memoization。对于传递给 memoized 子组件或在 `useEffect` 依赖数组中使用的对象也是一样。

## Trade-offs — 不要过度使用

```jsx
const x = useMemo(() => a + b, [a, b]); // ❌ pointless — adding is cheaper than memoizing
```

- Memoization 不是免费的：它会消耗内存加上**每**次渲染时的依赖比较。
- 错误的/遗漏的依赖数组会给您**过时的值**——最常见的错误。
- 只在您测量到实际问题时才使用 memoization（昂贵的计算，或一个重新渲染过于频繁的 memoized 子组件）。到处使用过早的 `useMemo`/`useCallback` 会增加混乱，甚至可能更慢。（React 19 的编译器可以自动 memoize，减少了这种需要。）