规则：preserve-manual-memoization

ReactAPI 参考：ESLint 插件

preserve-manual-memoization

验证编译器是否保留了现有的手动记忆化。只有当 React Compiler 的推断匹配或超过现有的手动记忆化时，它才会编译组件和 hooks。

规则详情 {/rule-details/}

React Compiler 会保留你现有的 useMemo、useCallback 和 React.memo 调用。如果你手动记忆化了某些内容，编译器会认为你有充分的理由，不会移除它。然而，不完整的依赖会阻止编译器理解代码的数据流并应用进一步的优化。

无效用法 {/invalid/}

本规则的错误代码示例：

js 复制代码

// ❌ Missing dependencies in useMemo
function Component({ data, filter }) {
  const filtered = useMemo(
    () => data.filter(filter),
    [data] // Missing 'filter' dependency
  );

  return <List items={filtered} />;
}

// ❌ Missing dependencies in useCallback
function Component({ onUpdate, value }) {
  const handleClick = useCallback(() => {
    onUpdate(value);
  }, [onUpdate]); // Missing 'value'

  return <button onClick={handleClick}>Update</button>;
}

有效用法 {/valid/}

本规则的正确代码示例：

js 复制代码

// ✅ Complete dependencies
function Component({ data, filter }) {
  const filtered = useMemo(
    () => data.filter(filter),
    [data, filter] // All dependencies included
  );

  return <List items={filtered} />;
}

// ✅ Or let the compiler handle it
function Component({ data, filter }) {
  // No manual memoization needed
  const filtered = data.filter(filter);
  return <List items={filtered} />;
}

故障排除 {/troubleshooting/}

我应该移除手动记忆化吗？ {/remove-manual-memoization/}

你可能想知道 React Compiler 是否使手动记忆化变得不必要：

js 复制代码

// Do I still need this?
function Component({items, sortBy}) {
  const sorted = useMemo(() => {
    return [...items].sort((a, b) => {
      return a[sortBy] - b[sortBy];
    });
  }, [items, sortBy]);

  return <List items={sorted} />;
}

如果你正在使用 React Compiler，可以安全地移除它：

js 复制代码

// ✅ Better: Let the compiler optimize
function Component({items, sortBy}) {
  const sorted = [...items].sort((a, b) => {
    return a[sortBy] - b[sortBy];
  });

  return <List items={sorted} />;
}

帮助我们改进文档

发现翻译问题或内容错误？请告诉我们。