← Back to rules

react/no-multi-comp 制限

何をするか

同じファイル内に複数の React コンポーネントを定義することを防止します。

なぜ問題なのか

1 つのファイル内で複数のコンポーネントを宣言すると、コードベースのナビゲーションや保守が難しくなる可能性があります。理想的には、各コンポーネントは別々のファイルに配置することで、より良い構成と再利用性が実現されます。

例

このルールに対して誤ったコードの例：

function Foo({ name }) {
  return <div>Hello {name}</div>;
}

function Bar({ name }) {
  return <div>Hello again {name}</div>;
}

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

function Foo({ name }) {
  return <div>Hello {name}</div>;
}

設定

ignoreStateless

type: boolean

default: false

true の場合、無状態コンポーネント（ステートレスコンポーネント）は無視され、同じファイル内に複数の無状態コンポーネントを定義できるようになります。また、1 つの状態付きコンポーネントと 1 つ以上の無状態コンポーネントを同じファイルに含むことも許可されます。

無状態とは、主に関数型コンポーネントを指し、memo や forwardRef で作成されたものも含まれます。

使用方法

設定ファイルまたは CLI でこのルールを有効化するには、以下の通り指定できます：

設定 (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/no-multi-comp": "error"
  }
}

CLI

oxlint --deny react/no-multi-comp --react-plugin

参照

• ルールのソース