← Back to rules

react/no-did-mount-set-state 正しさ

何をするのか

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

このルールは関数コンポーネントには関係しないため、現代的な React コードベースでは無効化できる可能性があります。

なぜ悪いのか

コンポーネントのマウント後に状態を更新すると、2回目の render() 呼び出しが発生し、プロパティやレイアウトのジャッキング（フラッシュ）を引き起こす可能性があります。 これによりパフォーマンスの問題や予期しない動作が生じる場合があります。

例

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

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

このルールに対して正しいコードの例：

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

設定

このルールは以下の文字列値のいずれかを受け入れます：

"allowed"

componentDidMount 内のネストされた関数内での setState 呼び出しを許可する。デフォルトの動作。

"disallow-in-func"

設定されている場合、componentDidMount 内のネストされた関数内での setState 呼び出しも禁止する。

使用方法

構成ファイルまたは CLI でこのルールを有効化するには、次のように使用できます：

Config (.oxlintrc.json)

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

CLI

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

参照

• ルールのソース