← Back to rules

react-perf/jsx-no-jsx-as-prop パフォーマンス

何をするか

現在のメソッド内でローカルに定義された JSX 要素を、JSX プロップスの値として使用することを禁止します。

なぜ問題か

ローカルで定義された JSX 要素をプロップスの値として使用すると、意図しない再レンダリングやパフォーマンスの低下を引き起こす可能性があります。親コンポーネントがレンダリングされるたびに、新しい JSX 要素のインスタンスが作成され、子コンポーネントの不要な再レンダリングが発生します。また、コンポーネントのプロップスが一貫して渡されていないため、コードの保守性も低下します。

例

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

<Item jsx={<SubItem />} />
<Item jsx={this.props.jsx || <SubItem />} />
<Item jsx={this.props.jsx ? this.props.jsx : <SubItem />} />

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

<Item callback={this.props.jsx} />

使用方法

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

Config (.oxlintrc.json)

{
  "plugins": ["react-perf"],
  "rules": {
    "react-perf/jsx-no-jsx-as-prop": "error"
  }
}

CLI

oxlint --deny react-perf/jsx-no-jsx-as-prop --react-perf-plugin

参照

• ルールのソース