När du renderar en lista behöver React ett sätt att veta vilket objekt som är vilket mellan renderingar så att det kan återanvända, omordna, infoga eller ta bort DOM-noder på rätt sätt. key är den identiteten.
{users.map(user => (
<Row key={user.id} user={user} />
))}
Att använda index som nyckel talar om för React "objektet på position 0 är samma objekt som tidigare" — vilket slutar fungera så snart listan ordnas om, eller du infogar/tar bort från början:
// 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.
En verklig symptom: en lista med input-fält där inmatning i en rad "hoppar" till en annan efter radering/sortering, eftersom React återanvände fel <input> (och dess interna värde/fokus).
user.id, en slug).Keys är ett tips till avstämningsalgoritmen; att få dem rätt håller både prestanda och komponenttillstånd korrekt.