← Back to rules

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

何をするか

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

なぜ問題なのか

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

例

このルールに対して誤りなコードの例：

<Item callback={new Function(...)} />
<Item callback={this.props.callback || function() {}} />

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

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

使用方法

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

Config (.oxlintrc.json)

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

CLI

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

参照

• ルールのソース