list item にはなぜ key が必要で、なぜ index を使うべきではないのですか？

Question

Accepted Answer

list を render するとき、React は render 間で **どの item がどれか**を知る必要があります。そうすることで DOM node を正しく再利用、並べ替え、挿入、削除できます。**`key`** がその identity です。 ```jsx {users.map(user => ( // stable, unique id ))} ``` ## array index が危険な理由 index を key にすると、React に「位置 0 の item は以前と同じ item だ」と伝えることになります。list が並べ替わったり、先頭に挿入・削除された瞬間に壊れます。 ```jsx // items: [A, B, C] with keys 0,1,2 // A を DELETE → [B, C], keys は 0,1 になる // React は key 0（以前は A）が今は B、key 1（以前は B）が今は C だと考える... // その結果、間違った DOM state を間違った item に保持してしまう。 ``` 実際の症状として、input の list で、削除や sort の後に、ある行に入力していた内容が別の行へ「移動」して見えることがあります。React が間違った ``（およびその内部 value/focus）を再利用したためです。 ## ルール - data にある **stable で unique** な id を使う（`user.id`、slug など）。 - index は、並べ替え、挿入、削除が絶対にない static list で**のみ**許容される。 - key は**兄弟要素の間で** unique であればよい（global に unique である必要はない）。 Key は reconciliation algorithm への hint です。正しく設定すると、performance と component state の両方を正しく保てます。