react/set-state-in-render Correctness
What it does
Disallows unconditionally setting state during render (including inside useMemo callbacks), which triggers additional renders and can cause infinite render loops.
Powered by the React Compiler, which runs once per file and is shared with the other React Compiler rules. Port of react-hooks/set-state-in-render.
Why is this bad?
Each render-time setState schedules another render; unconditional ones loop forever, conditional ones still double-render.
Examples
Examples of incorrect code for this rule:
jsx
import { useState } from "react";
function Component() {
const [state, setState] = useState(0);
setState(state + 1); // schedules another render on every render
return <div>{state}</div>;
}Examples of correct code for this rule:
jsx
import { useState } from "react";
function Component() {
const [state, setState] = useState(0);
return <button onClick={() => setState(state + 1)}>{state}</button>;
}How to use
To enable this rule using the config file or in the CLI, you can use:
json
{
"plugins": ["react"],
"rules": {
"react/set-state-in-render": "error"
}
}ts
import { defineConfig } from "oxlint";
export default defineConfig({
plugins: ["react"],
rules: {
"react/set-state-in-render": "error",
},
});bash
oxlint --deny react/set-state-in-render --react-pluginVersion
This rule was added in vnext.