← Back to rules

react/no-direct-mutation-state Correctness

What it does

This rule forbids the direct mutation of this.state in React components.

Note that this rule only applies to class components, it does not apply to function components. For modern React codebases, this rule may not be necessary or relevant.

Why is this bad?

React components should never mutate this.state directly, as calling setState() afterwards may replace the mutation you made.

this.state should be treated as if it were immutable.

Examples

Examples of incorrect code for this rule:

var Hello = createReactClass({
  componentDidMount: function () {
    this.state.name = this.props.name.toUpperCase();
  },
  render: function () {
    return <div>Hello {this.state.name}</div>;
  },
});

class Hello extends React.Component {
  constructor(props) {
    super(props);

    doSomethingAsync(() => {
      this.state = "bad";
    });
  }
}

Examples of correct code for this rule:

var Hello = createReactClass({
  componentDidMount: function() {
    this.setState({
      name: this.props.name.toUpperCase();
    });
  },
  render: function() {
    return <div>Hello {this.state.name}</div>;
  }
});

class Hello extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      foo: 'bar',
    }
  }
}

How to use

To enable this rule using the config file or in the CLI, you can use:

Config (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/no-direct-mutation-state": "error"
  }
}

CLI

oxlint --deny react/no-direct-mutation-state --react-plugin

References

• Rule Source