no-direct-mutation-state

Prevent direct mutation of this.state in React class components. This rule is part of eslint-plugin-react-features.

Quick SummaryCopy Anchor Link

Rule DetailsCopy Anchor Link

Directly mutating this.state bypasses React's update mechanism, causing bugs and missing renders.

Why This MattersCopy Anchor Link

ExamplesCopy Anchor Link

❌ IncorrectCopy Anchor Link

class Counter extends React.Component {
  handleClick = () => {
    this.state.count = this.state.count + 1;  // Direct mutation!
    this.state.items.push(newItem);  // Mutating array
  }
}

✅ CorrectCopy Anchor Link

class Counter extends React.Component {
  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
    this.setState(prev => ({
      items: [...prev.items, newItem]  // Immutable update
    }));
  }
}

// Or use hooks (recommended)
function Counter() {
  const [count, setCount] = useState(0);
  const handleClick = () => setCount(c => c + 1);
}

Configuration ExamplesCopy Anchor Link

Basic UsageCopy Anchor Link

{
  rules: {
    'react-features/no-direct-mutation-state': 'error'
  }
}

Related RulesCopy Anchor Link

• react-class-to-hooks - Migrate to hooks

Further ReadingCopy Anchor Link

• State and Lifecycle - React docs
• Using setState Correctly - setState reference

Known False NegativesCopy Anchor Link

• Aliases: const { items } = this.state; items.push(x) or const s = this.state; s.count = 1 mutate state through a local name and are not seen.
• Mutation through a helper: passing this.state.items to a function that mutates it is not followed.
• Mutating calls are recognised by method name (push, splice, sort, …) on a value read from this.state.

Not reported by design: any write in the constructor (where the initial state is set), and writes in a class that is not a React component.

Use this rule

npm install -D oxlint-plugin-react-features

{  "jsPlugins": ["oxlint-plugin-react-features"],  "rules": {    "react-features/no-direct-mutation-state": "error"  }}

import { defineConfig } from 'vite-plus';export default defineConfig({  lint: {    jsPlugins: ['oxlint-plugin-react-features'],    rules: {      'react-features/no-direct-mutation-state': 'error',    },  },});