React：配列のアイテムに key が必要な理由

React

アロー関数は直後の式を返す

あまりちゃんと意識できていなかったんですが、アロー関数は直後の式を自動的に返す。{} で囲まれる場合は、ブロック形式の関数とみなされるので return を書く必要がある。

// {} がない場合は自動的に返されるので return は不要
const listItems = chemists.map((person) => <li>...</li>);

//{} で囲む場合は関数となされるので return が必要
const listItems = chemists.map((person) => {
  return <li>...</li>;
});

配列のアイテムに key が必要な理由

React が配列のどの要素がどのコンポーネントに対応するかを判断するために key は必要。それにより各アイテムを正しく更新できる。

具体的なシーンとしてはソートや削除といったときで、配列内の構成が変わっても key により React は何が起こったかを推測でき、DOM ツリーに正しい反映ができる。

const listItems = people.map((person) => (
  <li key={person.id}>
    <h1>{person.name}</h1>
    <p>{person.bio}</p>
  </li>
));

複数の DOM ノードをレンダーするときには、<div> でグループ化するか、<Fragment> を使用する。フラグメントは DOM から消えるので <h1>, <p> というふうにフラットなリストを生成できる。

import { Fragment } from "react";

// ...

const listItems = people.map((person) => (
  <Fragment key={person.id}>
    <h1>{person.name}</h1>
    <p>{person.bio}</p>
  </Fragment>
));

キーのルール

  • キーは兄弟間で一意（区別つかなくなる）
  • キーを変更してはいけない（key の目的を失う）

参考