react/immutability Correctness
What it does
Disallows mutating props, state, hook arguments, hook return values, and other values that are immutable by the Rules of React.
Powered by the React Compiler, which runs once per file and is shared with the other React Compiler rules. Port of react-hooks/immutability.
Why is this bad?
React relies on immutability to know when to re-render; mutating these values causes stale UI and lost updates.
Examples
Examples of incorrect code for this rule:
jsx
import { useState } from "react";
function Component() {
const [state] = useState({ a: 0 });
state.a = 1; // mutates state directly
return <div>{state.a}</div>;
}Examples of correct code for this rule:
jsx
import { useState } from "react";
function Component() {
const [state, setState] = useState({ a: 0 });
return <div onClick={() => setState({ a: state.a + 1 })}>{state.a}</div>;
}How to use
To enable this rule using the config file or in the CLI, you can use:
json
{
"plugins": ["react"],
"rules": {
"react/immutability": "error"
}
}ts
import { defineConfig } from "oxlint";
export default defineConfig({
plugins: ["react"],
rules: {
"react/immutability": "error",
},
});bash
oxlint --deny react/immutability --react-pluginVersion
This rule was added in vnext.