← Back to rules

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

何をするか

現在のメソッド内でローカルに定義されたオブジェクトが、JSX のプロップスの値として使われることを防止します。

なぜ問題なのか

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

例

このルールに対する誤りの例：

<Item config={{}} />
<Item config={new Object()} />
<Item config={Object()} />
<Item config={this.props.config || {}} />
<Item config={this.props.config ? this.props.config : {}} />
<div style={{display: 'none'}} />

このルールに対する正しい例：

<Item config={staticConfig} />

使い方

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

Config (.oxlintrc.json)

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

CLI

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

参照

• ルールのソース