react/no-deriving-state-in-effects Perf
What it does
Disallows deriving values from state inside an effect and storing them back into state; derived values should be computed during render instead.
Powered by the React Compiler, which runs once per file and is shared with the other React Compiler rules. Port of react-hooks/no-deriving-state-in-effects.
Why is this bad?
Deriving state in effects causes a second render pass per update and lets the derived copy fall out of sync with its source.
Examples
Examples of incorrect code for this rule:
jsx
import { useEffect, useState } from "react";
function Component() {
const [firstName] = useState("Taylor");
const [lastName] = useState("Swift");
const [fullName, setFullName] = useState("");
useEffect(() => {
setFullName(firstName + " " + lastName);
}, [firstName, lastName]);
return <div>{fullName}</div>;
}Examples of correct code for this rule:
jsx
function Component({ firstName, lastName }) {
const fullName = firstName + " " + lastName;
return <div>{fullName}</div>;
}How to use
To enable this rule using the config file or in the CLI, you can use:
json
{
"plugins": ["react"],
"rules": {
"react/no-deriving-state-in-effects": "error"
}
}ts
import { defineConfig } from "oxlint";
export default defineConfig({
plugins: ["react"],
rules: {
"react/no-deriving-state-in-effects": "error",
},
});bash
oxlint --deny react/no-deriving-state-in-effects --react-pluginVersion
This rule was added in vnext.