https://zenn.dev/luvmini511/articles/f7b22d93e9c182

始め

Reactのmapを使う時、keyエラーをなくすためindexを使ったことがあります。しかし最近それがanti-patternだということを知りましたので、その理由をまとめました。

1. keyの存在意義

1-1. keyってなんだっけ

そういえばそもそもkeyって何で必要だったけ…？と、ふいと思ってしまいました。何となくは知ってますが、明確にしたいのでこの部分から始めましょう。

まずはこのサンプルコードをご覧ください。

export default function App() {
  let fruits = [{ name: "apple" }, { name: "banana" }, { name: "pear" }];
  return (
    <div className="App">
      {fruits.map((fruit) => (
        <p>{fruit.name}</p>
      ))}
    </div>
  );
}

fruitsという配列をmapメソッドを使ってpタグに入れてる簡単なコードです。これだけ見たら問題なさそうに見えますし、画面にもちゃんとでます。

しかし、console窓を確認したらこういうエラーが起きてました。

Warning: Each child in a list should have a unique "key" prop.

「リスト内の各childには、固有のkey propが必要です」という意味ですね。まだkeyが何なのか曖昧ですが、とりあえず固有のkeyが必要だと言ってるので入れます。

export default function App() {
  let fruits = [
    { id: 1, name: "apple" },
    { id: 2, name: "banana" },
    { id: 3, name: "pear" }
  ];
  return (
    <div className="App">
      {fruits.map((fruit) => (
        <p key={fruit.id}>{fruit.name}</p>
      ))}
    </div>
  );
}

key propにidを入れたら先のエラーが消えました。

keyが何をするやつなのかはReactの公式ドキュメントでも説明しています。

Key は、どの要素が変更、追加もしくは削除されたのかを React が識別するのに役立ちます。配列内の項目に安定した識別性を与えるため、それぞれの項目に key を与えるべきです。

この説明だけではピンとこないかもしれませんので、上のサンプルコードで例をあげてみます。

1-2. keyがない場合

fruitsの{ name: "apple" }と{ name: "banana" }の間に{ name: "melon" }を追加します。動的に追加するのが普通ですが、わかりやすくするためにサンプルコードには追加された結果を入れました。