react/no-array-index-key Perf

何をしますか

要素がキーとして配列のインデックスを使用している場合に警告します。

なぜ問題なのか

配列のインデックスを使用するのは良い考えではありません。なぜなら、要素を一意に識別できず、要素の順序が変更された場合にレンダリングが不必要に発生する可能性があるからです。配列が並べ替えられたり、配列の先頭に要素が追加されたりすると、インデックスは変化しますが、そのインデックスに対応する要素自体は同じである場合もあります。これにより、不要な再描画が発生します。

例

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

jsx

things.map((thing, index) => <Hello key={index} />);

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

jsx

things.map((thing, index) => <Hello key={thing.id} />);

使用方法

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

Config (.oxlintrc.json)CLI

json

{
  "plugins": ["react"],
  "rules": {
    "react/no-array-index-key": "error"
  }
}

bash

oxlint --deny react/no-array-index-key --react-plugin

参照

ルールのソース

何をしますか ​

なぜ問題なのか ​

例 ​

使用方法 ​

参照 ​

何をしますか

なぜ問題なのか

例

使用方法

参照