React useMemo依赖数组含动态对象键时意外重渲染问题解决

问题根源 #

你当前的代码有两个核心问题导致不必要的重计算：

1. 依赖数组中使用了...Object.keys(data).filter(key => keysToWatch.includes(key))——每次组件渲染时，这个表达式都会生成新的数组引用，哪怕数组内容没变，React的useMemo也会认为依赖发生了变化，触发重计算。
2. 直接依赖整个data对象——只要data有任何修改（比如添加无关的键'd'），data的引用就会变化，导致useMemo触发重计算，哪怕修改的内容不在你关注的键列表里。

解决方案：精准控制依赖数组 #

我们只需要让useMemo的依赖仅包含真正影响计算结果的因素：keysToWatch数组本身，以及data中keysToWatch对应的具体值。

简化版实现

直接修改useMemo的依赖和计算逻辑，去掉冗余的对象遍历：

const ExpensiveComponent = ({ data, keysToWatch }) => {
  const [count, setCount] = useState(0);

  const memoizedValue = useMemo(() => {
    console.log('Recalculating memoized value');
    // 直接遍历关注的键求和，更高效
    return keysToWatch.reduce((total, key) => total + (data[key] || 0), 0);
  }, [keysToWatch, ...keysToWatch.map(key => data[key])]); // 仅依赖关注的键值和keys列表

  return (
    <div>
      <p>Memoized Value: {memoizedValue}</p>
      <button onClick={() => setCount(prev => prev + 1)}>Increment Count: {count}</button>
    </div>
  );
};

复杂场景适配（拆分逻辑）

如果你的计算逻辑更复杂，可以先缓存data中需要关注的子集，再基于这个子集计算：

const ExpensiveComponent = ({ data, keysToWatch }) => {
  const [count, setCount] = useState(0);

  // 先缓存仅包含关注键的data子集
  const relevantData = useMemo(() => {
    return keysToWatch.reduce((acc, key) => {
      acc[key] = data[key];
      return acc;
    }, {});
  }, [keysToWatch, ...keysToWatch.map(key => data[key])]);

  // 基于缓存的子集计算最终值
  const memoizedValue = useMemo(() => {
    console.log('Recalculating memoized value');
    return Object.values(relevantData).reduce((total, val) => total + val, 0);
  }, [relevantData]);

  return (
    <div>
      <p>Memoized Value: {memoizedValue}</p>
      <button onClick={() => setCount(prev => prev + 1)}>Increment Count: {count}</button>
    </div>
  );
};

验证效果 #

• 点击「Increment Count」：组件重渲染，但keysToWatch和对应data的值都未变化，useMemo不会触发重计算。
• 添加'd'到data：data引用变化，但'd'不在关注列表中，依赖数组无变化，useMemo不触发。
• 添加'c'到keysToWatch：keysToWatch数组引用变化，依赖更新，触发重计算。
• 修改data中'a'/'b'/'c'的值：对应依赖项变化，触发重计算。

内容的提问来源于stack exchange，提问作者Robert Clave