Gdy renderujesz listę, React musi wiedzieć który element to który między renderowaniami, aby mógł prawidłowo ponownie użyć, zmienić kolejność, wstawić lub usunąć węzły DOM. key to ta tożsamość.
{users.map(user => (
<Row key={user.id} user={user} /> // stable, unique id
))}
Używanie indeksu jako klucza mówi React'owi "element na pozycji 0 to ten sam element co poprzednio" — co się psuje w momencie, gdy lista zmienia kolejność lub wstawisz/usuniesz z przodu:
// 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.
Rzeczywisty symptom: lista pól wejściowych, gdzie wpisanie w jeden wiersz "przeskakuje" do innego po usunięciu/sortowaniu, ponieważ React ponownie użył złego <input> (i jego wewnętrznej wartości/fokusa).
user.id, slug).Klucze są wskazówką dla algorytmu reconciliation; prawidłowe ich ustawienie zapewnia zarówno wydajność, jak i poprawność stanu komponentu.