Зачем нужен атрибут Key?

Атрибут `key` в React нужен, чтобы уникально идентифицировать элементы списка — это помогает механизму согласования (reconciliation) понять, какие элементы добавились, удалились или переместились.

Зачем нужен

При рендере списка React сравнивает старое и новое дерево. key говорит, какой элемент «тот же самый» между рендерами — тогда React переиспользует DOM и состояние, а не пересоздаёт всё заново.

{users.map((user) => (
  <li key={user.id}>{user.name}</li>
))}

Что даёт правильный key

• Корректное обновление — React знает, что изменилось.
• Сохранение состояния — состояние элемента (инпут) остаётся привязанным к нужным данным.
• Производительность — переиспользование вместо пересоздания.

Проблема индекса как key

При вставке/удалении/сортировке индексы сдвигаются, React путает элементы: теряется состояние инпутов, лишние перерисовки. Индекс допустим только для статичных списков.

// Плохо при изменении порядка
{items.map((item, i) => <Input key={i} />)}

Правила

• Уникальные среди соседей.
• Стабильные — id из данных, не Math.random().

Коротко для собеседования

key уникально идентифицирует элементы списка для reconciliation: React понимает, что добавилось/удалилось/переместилось, переиспользует DOM и состояние. Ключи должны быть уникальными и стабильными (id из данных). Индекс как key ведёт к багам при изменении порядка.