Зачем нужен prop key?

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

Зачем нужен

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

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

Что даёт

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

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

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

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

Индекс допустим только для статичных списков.

Правила

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

Особенность

key — служебный проп React, не передаётся в компонент как обычный проп (недоступен через props.key).

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

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