react/no-direct-mutation-state Correctness

What it does

The restriction coder cannot directly change the value of this.state

Why is this bad?

calling setState() afterwards may replace the mutation you made

Examples

 // error
 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';
     });
   }
 }

 // success
 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 in the CLI or using the config file, you can use:

CLI

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

Config (.oxlintrc.json)

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

References

• Rule Source