react/react-compiler Nursery
What it does
Runs the React Compiler's analysis in lint-only mode and reports code that violates the Rules of React — for example calling hooks conditionally, calling setState during render, accessing refs during render, or mutating props and state.
This rule surfaces the same diagnostics as eslint-plugin-react-compiler.
WARNING
This rule is experimental, and will change to fit in better with Oxlint.
Why is this bad?
Code that breaks the Rules of React can behave unpredictably at runtime (stale UI, infinite re-render loops, lost state) and prevents React Compiler from optimizing the component. Following these rules keeps components correct and allows them to be automatically memoized.
Examples
Examples of incorrect code for this rule:
function Component(props) {
if (props.cond) {
useState(0); // hooks may not be called conditionally
}
return <div>{props.text}</div>;
}function Component() {
const ref = useRef(null);
return <div>{ref.current}</div>; // refs may not be read during render
}Examples of correct code for this rule:
function Component(props) {
const [state, setState] = useState(0);
return <button onClick={() => setState(state + 1)}>{props.text}</button>;
}Configuration
This rule accepts a configuration object with the following properties:
reportAllBailouts
type: boolean
default: false
Also report compiler bail-outs — places where React Compiler skipped a component or hook (for example because of unsupported syntax) without finding a rule violation. These do not indicate incorrect code, only code that the compiler declined to optimize.
How to use
To enable this rule using the config file or in the CLI, you can use:
{
"plugins": ["react"],
"rules": {
"react/react-compiler": "error"
}
}import { defineConfig } from "oxlint";
export default defineConfig({
plugins: ["react"],
rules: {
"react/react-compiler": "error",
},
});oxlint --deny react/react-compiler --react-pluginVersion
This rule was added in v1.70.0.