react/react-compiler Nursery

以仅 lint 模式运行 React Compiler 的分析，并报告违反 React 规则的代码——例如有条件地调用 hooks、在渲染期间调用 setState、在渲染期间访问 refs，或修改 props 和 state。

此规则显示与 eslint-plugin-react-compiler 相同的诊断。

WARNING

此规则处于实验阶段，后续会进行调整以便更好地适配 Oxlint。

违反 React 规则的代码在运行时可能出现不可预测的行为（陈旧的 UI、无限重渲染循环、状态丢失），并会阻止 React Compiler 对组件进行优化。遵循这些规则可以保持组件正确，并允许它们被自动 memoize。

以下是此规则的错误代码示例：

jsx

function Component(props) {
  if (props.cond) {
    useState(0); // hooks 不能有条件地调用
  }
  return <div>{props.text}</div>;
}

jsx

function Component() {
  const ref = useRef(null);
  return <div>{ref.current}</div>; // refs 不能在渲染期间读取
}

以下是此规则的正确代码示例：

jsx

function Component(props) {
  const [state, setState] = useState(0);
  return <button onClick={() => setState(state + 1)}>{props.text}</button>;
}

配置

此规则接受一个配置对象，包含以下属性：

类型：boolean

默认值：false

同时报告编译器放弃优化的情况——即 React Compiler 跳过某个组件或 Hook 的位置（例如因为存在不支持的语法），但未发现规则违规。这些情况并不表示代码有误，只是表示编译器选择不对这段代码进行优化。

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

Config (.oxlintrc.json)Config (oxlint.config.ts)CLI

json

{
  "plugins": ["react"],
  "rules": {
    "react/react-compiler": "error"
  }
}

import { defineConfig } from "oxlint";

export default defineConfig({
  plugins: ["react"],
  rules: {
    "react/react-compiler": "error",
  },
});

bash

oxlint --deny react/react-compiler --react-plugin

此规则是在 v1.70.0 中添加的。