← Back to rules

react/no-set-state スタイル

An auto-fix is available for this rule.

何をしているか

React コンポーネント内で this.setState の使用を禁止します。

なぜ問題なのか

アプリケーションの状態と UI コンポーネントを分離するアーキテクチャ（例：Flux）を使用している場合、コンポーネント内のローカル状態の使用を禁止したい場合があります。このルールは、フォームを使用しない読み取り専用のアプリケーションにおいて特に役立ちます。なぜなら、このような状況ではローカルコンポーネント状態はほとんど必要ないからです。

例

このルールに違反する誤ったコードの例：

var Hello = createReactClass({
  getInitialState: function () {
    return {
      name: this.props.name,
    };
  },
  handleClick: function () {
    // エラー：this.setState は使用できません
    this.setState({
      name: this.props.name.toUpperCase(),
    });
  },
  render: function () {
    return <div onClick={this.handleClick.bind(this)}>Hello {this.state.name}</div>;
  },
});

使い方

設定ファイルまたは CLI でこのルールを有効化するには、次のようにします。

Config (.oxlintrc.json)

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

CLI

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

参照

• ルールのソース