← Back to rules

react/no-will-update-set-state 正しさ

何をするのか

componentWillUpdate ライフサイクルメソッド内で setState を使用することを禁止します。

なぜ悪いのか

コンポーネントの更新手順中に状態を更新すると、不定なコンポーネント状態が発生し、許可されていません。 これにより、あなたの React アプリケーションで予期しない動作やバグが発生する可能性があります。

例

このルールに対して不適切なコードの例：

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

このルールに対して適切なコードの例：

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

使い方

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

Config (.oxlintrc.json)

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

CLI

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

参照

• ルールのソース