なぜkeyにindexを使っってはいけないか
まず、keyにindex を使うことはできてしまいます。エラーとなることはなく、
コンソールにワーニングが出ます。
こちらは無視することはできますが、それはいけません。
なぜなら、Reactの特徴でもある 差分更新ができなくなってしまうからです。
indexというのは表示する順番に依存するため、その度に意図せず変更されてしまいます。
そのため、例えばリストの真ん中に新規のデータを挿入したい時でもその部分だけ更新するのが期待値ですが、
そうはならず、リスト全体が更新されてしまいます。
データが多いリストであればこれはパフォーマンスにも影響を与えてしまうので、無視することはやめましょう。
##keyにはユニークな値を使う
この表題のルールを守るだけで、より良いパフォーマンスになり正しい差分更新ができます。
一般的には、DBと接続しているシステムであればidを利用することが多いかと思います。
他では値そのものが被る可能性がなければ、それも良いかもしれないです。
大切なことはユニークな値を使うことです。
## リストそれぞれユニークであれば良い
こちらはそれぞれのリスト表示でユニークであれば良いので、他のリストを考慮しなくて大丈夫です。
そのループ内でのみ適用されます。
## 最後に
レビューの際など、keyにindexを使っている方がいたら指摘しましょう！
ありがとうございました。