React useMemo 依赖对象每次新建为什么仍然重复计算

如果 useMemo 的计算函数每次组件渲染都重新执行，先看依赖数组里有没有组件函数体内新建的对象或数组。React 比较依赖时使用 Object.is，对象比较的是引用，不是里面的字段；因此 { matchMode: 'whole-word', text } 每次都是新引用，即使 text 没变，缓存也会失效。

为什么对象依赖会让 useMemo 失效

下面这种写法看起来依赖写全了，实际上把最容易变化的对象放进了依赖数组：

function Dropdown({ allItems, text }) {
  // 组件每次渲染都会创建一个新的对象引用
  const searchOptions = { matchMode: 'whole-word', text };

  const visibleItems = useMemo(() => {
    // 计算本身没有问题，问题在 searchOptions 的引用不稳定
    return searchItems(allItems, searchOptions);
  }, [allItems, searchOptions]);

  return ;
}

第一次渲染得到引用 A，下一次执行函数体又得到引用 B。A 和 B 的字段可能完全相同，但 Object.is(A, B) 为 false，所以 React 会再次调用 searchItems。这不是 React 没有缓存，而是缓存的前提已经被依赖变化打破。

先把对象移入 useMemo 的计算函数

如果 searchOptions 只服务于这一次筛选，最简单的修复是不要让它成为外部依赖，把它放进回调里，并直接依赖真正的原始值：

function Dropdown({ allItems, text }) {
  const visibleItems = useMemo(() => {
    // 只有 allItems 或 text 变化时，才需要重新筛选
    const searchOptions = { matchMode: 'whole-word', text };
    return searchItems(allItems, searchOptions);
  }, [allItems, text]);

  return ;
}

这时依赖数组表达的是业务条件：数据集合 allItems 或搜索词 text 变化。不要为了让依赖数组“看起来完整”而把临时对象加进去；对象的创建位置决定了它是否会被当成新的响应式值。

对象必须传给其他 Hook 时再稳定它

有些对象不是只给当前计算用，而是还要作为 useEffect 的依赖。这时可以先用原始依赖记忆对象：

function ChatRoom({ roomId }) {
  const options = useMemo(() => ({
    // 服务器地址是固定配置，房间号来自 props
    serverUrl: 'https://localhost:1234',
    roomId,
  }), [roomId]);

  useEffect(() => {
    // 连接只随稳定后的 options 变化
    const connection = createConnection(options);
    connection.connect();
    return () => connection.disconnect();
  }, [options]);
}

不过 React 官方也提醒，useMemo 是性能优化手段，不是语义保证。若对象只在 Effect 中使用，通常可以把对象直接移入 Effect，让 Effect 依赖 roomId；这样层次更少，也不需要维护一层额外缓存。

用检查清单区分真正的依赖变化

排查时不要只盯着“计算函数执行了几次”，按下面顺序看更快：

• 确认依赖数组存在且长度固定；没有第二个参数时，useMemo 会在每次渲染重新计算。
• 逐项检查对象、数组和函数是否在组件体内新建；它们要么移入回调，要么用原始依赖稳定。
• 开发环境的 Strict Mode 可能让计算函数被调用两次，这是帮助发现不纯逻辑的行为，不等于生产环境每次都会重复计算。
• 用 React DevTools Profiler 确认计算是否真的昂贵；很快的计算不必为了缓存增加复杂度。

常见问题

把对象写成 JSON.stringify 后放进依赖数组可以吗？

不建议把序列化当常规修复。它会增加计算成本，并隐藏真正的依赖边界；优先拆出稳定的原始字段。

useMemo 的依赖对象字段没变，为什么还是会重算？

因为 React 比较的是对象引用。字段相同只说明值相似，不代表两个对象是同一个引用。

所有对象都应该用 useMemo 包起来吗？

不需要。只有计算明显昂贵、对象会传给依赖敏感的 Hook，或需要配合 memo 子组件时，稳定引用才更有价值。