Reactで配列からリストをレンダーする際、各要素に渡す key プロップの主な役割として正しいものはどれですか？

解説

正解は「兄弟要素の中で各アイテムを一意に識別し」です。key は、配列のどのアイテムがどのコンポーネントに対応するかを React に伝える目印です。並べ替え・挿入・削除が起きても、React は key を手がかりに正しい要素を更新し、各アイテムの state（コンポーネントが保持する値）を保ちます。key の基本的な書き方const people = [ { id: 1, name: "佐藤" }, { id: 2, name: "鈴木" }, ]; export default function List() { return ( <ul> {people.map((person) => ( <li key={person.id}>{person.name}</li> // データ固有の id を key にする ))} </ul> ); }key を省略すると、コンソールに Each child in a list should have a unique "key" prop. という警告が表示されます。誤答が当てはまらない理由「アイテムの表示順序を指定し」は誤りです。表示順は配列の並び順で決まり、key の値で並べ替えられることはありません。「子コンポーネント内で props.key として」は誤りです。key は React 自身が使う特別な属性で、子コンポーネントには props として渡されません。ID が必要なら id={person.id} のように別の名前で渡します。「アプリ全体で一意な値を指定し」は誤りです。一意であるべき範囲は同じ配列内の兄弟要素だけで、DOM に属性として出力されることもありません。配列のインデックスや Math.random() を key にすると state がずれるmap((item, index) => ...) の index を key にすると、先頭への追加や並べ替えで同じ key が別のアイテムを指すようになり、入力欄の内容などが別の行に残る不具合が起きます。また、レンダー中に Math.random() で key を生成すると毎回値が変わるため、要素が作り直されて state が失われます。データベースの ID のように、データと一緒に保存された安定した値を使いましょう。参考リストのレンダー – React