Когда вы отображаете список, React должна знать какой элемент это какой между рендерами, чтобы она могла правильно переиспользовать, переупорядочить, вставить или удалить узлы DOM. key — это эта идентичность.
{users.map(user => (
<Row key={user.id} user={user} />
))}
Использование индекса в качестве ключа говорит React "элемент на позиции 0 это тот же элемент, что и раньше" — что ломается в момент, когда список переупорядочивается или вы вставляете/удаляете с начала:
// 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.
Реальный симптом: список input'ов, где введение текста в одну строку "прыгает" в другую после удаления/сортировки, потому что React переиспользовала неправильный <input> (и его внутреннее значение/фокус).
user.id, slug).Ключи — это подсказка для алгоритма согласования; правильное их использование сохраняет и производительность, и состояние компонента корректными.