Для чего нужен Key в списках?

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

Зачем нужен

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

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

Что даёт

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

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

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

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

Правила

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

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

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