Ketika Anda merender list, React membutuhkan cara untuk mengetahui item mana yang mana antar renders sehingga dapat menggunakan kembali, mengurutkan ulang, menyisipkan, atau menghapus node DOM dengan benar. key adalah identitas tersebut.
{users.map(user => (
<Row key={user.id} user= />
))}
Menggunakan index sebagai key memberi tahu React "item di posisi 0 adalah item yang sama seperti sebelumnya" — yang rusak saat list diurutkan ulang, atau Anda menyisipkan/menghapus dari depan:
// items: [A, B, C] with keys 0,1,2
// you DELETE A → [B, C], keys become 0,1
// React thinks key 0 (was A) is now B, key 1 (was B) is now C...
// so it keeps the wrong DOM state with the wrong item.
Gejala nyata: list input di mana mengetik di satu baris "melompat" ke baris lain setelah menghapus/mengurutkan, karena React menggunakan kembali <input> yang salah (dan nilainya/fokusnya yang internal).
user.id, slug).Key adalah petunjuk untuk algoritma rekonsiliasi; mengaturnya dengan benar menjaga kinerja dan state komponen tetap benar.