react/set-state-in-effect Correctness
What it does
Disallows calling setState synchronously inside an effect body.
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-effect.
Why is this bad?
Calling setState synchronously in an effect triggers an immediate extra render pass and usually indicates non-local derived data, a derived-event pattern, or improper external-data synchronization. Values that can be computed from props and state should be computed during render instead.
Examples
Examples of incorrect code for this rule:
jsx
import { useEffect, useState } from "react";
function Component() {
const [state, setState] = useState(0);
useEffect(() => {
setState((s) => s + 1);
});
return state;
}Examples of correct code for this rule:
jsx
function Component({ value }) {
const doubled = value * 2;
return <div>{doubled}</div>;
}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-effect": "error"
}
}ts
import { defineConfig } from "oxlint";
export default defineConfig({
plugins: ["react"],
rules: {
"react/set-state-in-effect": "error",
},
});bash
oxlint --deny react/set-state-in-effect --react-pluginVersion
This rule was added in vnext.