← Back to rules

react/state-in-constructor スタイル

何をするか

コンストラクタ内またはクラスプロパティを使用して状態の初期化を行うスタイルを強制します。

このルールは関数型コンポーネントには適用されないため、現代的な React プロジェクトでは無効化できる可能性があります。

なぜ問題なのか

一貫性のない状態初期化スタイルは、コードベースの保守性および理解のしやすさを低下させます。 このルールにより、React クラスコンポーネント全体で一貫したパターンが維持されます。

例

デフォルトで "always" モードの場合の 不正な コードの例：

class Foo extends React.Component {
  state = { bar: 0 };
  render() {
    return <div>Foo</div>;
  }
}

デフォルトで "always" モードの場合の 正しい コードの例：

class Foo extends React.Component {
  constructor(props) {
    super(props);
    this.state = { bar: 0 };
  }
  render() {
    return <div>Foo</div>;
  }
}

"never" モード

状態の初期化をクラスプロパティを使用して行うことを強制します。

"never" モードでのこのルールに違反する 不正な コードの例：

class Foo extends React.Component {
  constructor(props) {
    super(props);
    this.state = { bar: 0 };
  }
  render() {
    return <div>Foo</div>;
  }
}

"never" モードでのこのルールに適合する 正しい コードの例：

class Foo extends React.Component {
  state = { bar: 0 };
  render() {
    return <div>Foo</div>;
  }
}

設定

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

"always"

コンストラクタ内で状態の初期化を行うことを強制します。 これがデフォルトのモードです。

"never"

クラスプロパティを使用して状態の初期化を行うことを強制します。

使用方法

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

設定 (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/state-in-constructor": "error"
  }
}

CLI

oxlint --deny react/state-in-constructor --react-plugin

参照

• ルールのソース