list を render するとき、React は render 間で どの item がどれかを知る必要があります。そうすることで DOM node を正しく再利用、並べ替え、挿入、削除できます。key がその identity です。
jsx
{users.map(user => (
<Row key={user.id} user={user} /> // stable, unique id
))}
list を render するとき、React は render 間で どの item がどれかを知る必要があります。そうすることで DOM node を正しく再利用、並べ替え、挿入、削除できます。key がその identity です。
{users.map(user => (
<Row key={user.id} user={user} /> // stable, unique id
))}
ジュニアからシニアまで、詳細な回答付きのIT面接質問ライブラリ。
寄付するindex を key にすると、React に「位置 0 の item は以前と同じ item だ」と伝えることになります。list が並べ替わったり、先頭に挿入・削除された瞬間に壊れます。
// 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 が間違った <input>（およびその内部 value/focus）を再利用したためです。
user.id、slug など）。Key は reconciliation algorithm への hint です。正しく設定すると、performance と component state の両方を正しく保てます。