Když vykreslujete seznam, React potřebuje způsob, jak vědět, který prvek je který mezi vykreslováními, aby mohl správně znovu použít, změnit pořadí, vložit nebo odstranit uzly DOM. key je tato identita.
{users.map(user => (
<Row key={user.id} user={user} /> // stable, unique id
))}
Použití indexu jako klíče říká React "prvek na pozici 0 je stejný prvek jako dříve" — což se zlomí v okamžiku, kdy se seznam změní na pořadí, nebo vložíte/odstraníte zepředu:
// 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.
Skutečný příznak: seznam vstupů, kde psaní v jednom řádku "skočí" na další po smazání/řazení, protože React znovu použil špatný <input> (a jeho interní hodnotu/zaměření).
user.id, slug).Klíče jsou nápověda pro algoritmus reconciliace; jejich správné získání udržuje správný výkon i stav komponenty.