先测量，然后修复真正的原因——不要凭猜测到处撒 useMemo。
诊断
使用 React DevTools Profiler（启用 "Highlight updates when components render"）。它会显示哪些组件重新渲染了，以及为什么（props 改变、state 改变、父组件渲染、context 改变）。
常见原因与修复方法
1. 每次渲染都创建新的 object/array/function props，会让 React.memo 失效：
jsx
// ❌ new function + new object every render
<Child onClick={() => go()} style={{ color: "red" }} />
// ✅ stabilize them
const onClick = useCallback(() => go(), []);
style = ( ({ : }), []);
2. 每次渲染都重新创建 context value → 所有的 consumer 都会重新渲染。对 value 进行 memoize，或者拆分 context。
3. state 放得太高。 把 state 下移，使更少的组件依赖它，这通常是最大的收益：
jsx
// move the fast-changing input state DOWN into the input component
// so typing doesn't re-render the whole page
4. 在渲染中进行昂贵的计算 → 用 useMemo 包裹。
不要过度优化
重新渲染通常开销很小——React 很快。大多数「优化」只是增加复杂度，却没有可衡量的收益。优先采用结构性的修复（把 state 就近放置、对成千上万行进行列表虚拟化），而不是到处散布 memo。只针对 profiler 揭示出的具体热点进行优化，并重新测量以确认修复确实起了作用。