Quando esegui il rendering di un elenco, React ha bisogno di un modo per sapere quale elemento è quale tra i render in modo da poter riutilizzare, riordinare, inserire o eliminare correttamente i nodi DOM. La key è quell'identità.
{users.map(user => (
<Row key={user.id} user={user} />
))}
Utilizzare l'indice come key dice a React "l'elemento alla posizione 0 è lo stesso elemento di prima" — che si rompe non appena l'elenco viene riordinato, o inserisci/elimini dall'inizio:
// 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.
Un vero sintomo: un elenco di input in cui digitare in una riga "salta" a un'altra dopo l'eliminazione/ordinamento, perché React ha riutilizzato l'<input> sbagliato (e il suo valore interno/focus).
user.id, slug).Le key sono un suggerimento all'algoritmo di riconciliazione; impostarle correttamente mantiene corretti sia le prestazioni che lo stato del componente.