react/no-set-state Style

What it does

Disallow the usage of this.setState in React components.

Why is this bad?

When using an architecture that separates your application state from your UI components (e.g. Flux), it may be desirable to forbid the use of local component state. This rule is especially helpful in read-only applications (that don't use forms), since local component state should rarely be necessary in such cases.

Examples

Examples of incorrect code for this rule:

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

How to use

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

CLI

oxlint --deny react/no-set-state --react-plugin

Config (.oxlintrc.json)

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

References

• Rule Source