【アンチパターン】reactのkeyにindexを使わない

そもそもreactのkeyとは？

https://ja.legacy.reactjs.org/docs/lists-and-keys.html

keyはプロパティの1つで、要素のリスト(liとか)を作成する時に必要なもの。そしてreactではmapなどの関数でリストをレンダリングする際にkeyを必要とします。

なぜkeyにindexを使っちゃダメなのか？

理由は単純でindexをkeyに使うとその配列に変更があったときに予期しない動作になるからです。

例えば、[sample1、sample2、sample3]の配列をmap関数でレンダリングすることを考えます。配列に変更がなかった場合問題なく3つの要素がレンダリングされます。ですがsample1が配列から削除された場合、元々レンダリング結果ではsample2が一番初めに表示され、sample3が2つ目に表示されます。

もしsample2が何か人の名前だとして、レンダリング先は以下のようなURLだったとします。
"https://hoge.com/[index番号]/人の名前"

このような場合だと本来sample2のURLは"https://hoge.com/1/人の名前" が正しいはずですが、"https://hoge.com/0/人の名前" と変わってしまいます。

これだと本来予期していた動作になっておらず404番を返されてしまいます。

改善策

リストには固有のidを持たせて、それをレンダリングするようにしましょう。

const sample = [
  {
    id=1, name="taro"
    id=2, name="john"
    id=3, name="hana"
  }
]