When you render a list, React needs a way to know which item is which between renders so it can reuse, reorder, insert, or delete DOM nodes correctly. The key is that identity.
{users.map(user => (
<Row key={user.id} user={user} /> // stable, unique id
))}
Using the index as a key tells React "the item at position 0 is the same item as before" — which breaks the moment the list reorders, or you insert/remove from the front:
// 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.
A real symptom: a list of inputs where typing in one row "jumps" to another after deleting/sorting, because React reused the wrong <input> (and its internal value/focus).
user.id, a slug).Keys are a hint to the reconciliation algorithm; getting them right keeps both performance and component state correct.