react/no-direct-mutation-state

Disallow assigning to this.state outside of the constructor

React only renders a component again when you call setState. If you assign to this.state or to something inside it, the screen keeps showing the old value, and the next setState may overwrite your change.

The constructor is the one place where you can assign this.state, because nothing has rendered yet.

Configure#

Off by default. To turn it on:

bunfig.toml
[lint.rules]
"react/no-direct-mutation-state" = "error" # or "warn"

Examples#

example.jsx2 problems
class Counter extends React.Component {
  increment() {
    this.state.count++;
  }

  rename(name) {
    this.state.user.name = name;
  }
}
example.jsxNo problems
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0, user: props.user };
  }

  increment() {
    this.setState(state => ({ count: state.count + 1 }));
  }

  rename(name) {
    this.setState(state => ({ user: { ...state.user, name } }));
  }
}

A callback in the constructor runs later, so an assignment there is reported:

example.jsx1 problem
class Counter extends React.Component {
  constructor(props) {
    super(props);
    props.store.subscribe(() => {
      this.state.count = props.store.count;
    });
  }
}