Skip to content
← Back to rules

react/preserve-manual-memoization 正确性

功能

验证现有的手动记忆化(useMemouseCallbackReact.memo)是否会被 React Compiler 保留:编译器只会编译推断出的依赖项与手动指定的依赖项相匹配或更多的代码。

由 React Compiler 提供支持,它会针对每个文件运行一次,并与其他 React Compiler 规则共享。移植自 react-hooks/preserve-manual-memoization

为什么这很糟糕?

当编译器无法证明现有的手动记忆化会被保留时,它会跳过对该代码的优化。

示例

此规则的错误代码示例:

jsx
import { useCallback } from "react";
function useFoo(props) {
  const values = [];
  values.push(props);
  return useCallback(() => values, [values]);
}

此规则的正确代码示例:

jsx
import { useMemo } from "react";
function Component({ propA }) {
  return useMemo(() => propA.x, [propA]);
}

如何使用

To enable this rule using the config file or in the CLI, you can use:

json
{
  "plugins": ["react"],
  "rules": {
    "react/preserve-manual-memoization": "error"
  }
}
ts
import { defineConfig } from "oxlint";

export default defineConfig({
  plugins: ["react"],
  rules: {
    "react/preserve-manual-memoization": "error",
  },
});
bash
oxlint --deny react/preserve-manual-memoization --react-plugin

版本

此规则在 vnext 中添加。

参考