> For AI agents: the complete documentation index is available at https://rslint.rs/llms.txt, the full documentation bundle is available at https://rslint.rs/llms-full.txt.

# no-direct-mutation-state

[Added in v0.5.0](https://github.com/web-infra-dev/rslint/releases/tag/v0.5.0)
## Configuration

| Preset                            | Configured Value |
| --------------------------------- | ---------------- |
| ✅ reactPlugin.configs.recommended | `"error"`        |


```ts title=rslint.config.ts
import { defineConfig, reactPlugin } from '@rslint/core';

export default defineConfig([
  reactPlugin.configs.recommended,
  {
    rules: {
      'react/no-direct-mutation-state': 'error',
    },
  },
]);
```

## Rule Details

Disallow direct mutation of `this.state`. State should only be updated through
`setState()` (or the `useState` setter), so React can correctly schedule a
re-render and reconcile the resulting UI. Writing to `this.state` directly is
allowed only inside the component's constructor, where the initial state is
being seeded.

The rule targets both ES6 class components extending `Component` /
`PureComponent` (or their pragma-qualified forms, e.g. `React.Component`) and
ES5 components created with `createReactClass(...)` (or
`<pragma>.<createClass>(...)`).

Examples of **incorrect** code for this rule:

```javascript
var Hello = createReactClass({
  render: function () {
    this.state.foo = "bar";
    return <div>Hello {this.props.name}</div>;
  },
});
```

```javascript
class Hello extends React.Component {
  componentDidMount() {
    this.state.foo = "bar";
  }
}
```

```javascript
class Hello extends React.Component {
  constructor(props) {
    super(props);
    doSomethingAsync(() => {
      this.state = "bad";
    });
  }
}
```

Examples of **correct** code for this rule:

```javascript
class Hello extends React.Component {
  constructor() {
    super();
    this.state = { foo: "bar" };
  }
  update() {
    this.setState({ foo: "baz" });
  }
}
```

```javascript
class Hello {
  getFoo() {
    this.state.foo = "bar";
    return this.state.foo;
  }
}
```

## Original Documentation

- [eslint-plugin-react: no-direct-mutation-state](https://github.com/jsx-eslint/eslint-plugin-react/blob/v7.37.5/docs/rules/no-direct-mutation-state.md)
- [Source code](https://github.com/jsx-eslint/eslint-plugin-react/blob/v7.37.5/lib/rules/no-direct-mutation-state.js)