Зачем нужен key при создании списка данных в JSX?

key при рендере списка нужен, чтобы React мог опознавать элементы между рендерами — понимать, что добавилось, что удалилось, а что просто переместилось.

Что происходит без key

Список в JSX — массив элементов. Без ключей при сравнении деревьев React сопоставляет их по позиции:

// было: [<Item A/>, <Item B/>, <Item C/>]
// вставили X в начало: [<Item X/>, <Item A/>, <Item B/>, <Item C/>]
// React по позициям: «A стал X, B стал A, C стал B, добавился C»

Итог: обновлены все элементы (вместо одной вставки), а состояние элементов (ввод, фокус, чекбоксы) остаётся на позициях и «переезжает» к чужим данным.

Что даёт key

{messages.map((m) => (
  <Message key={m.id} data={m} />
))}

React сопоставляет по ключу: id=5 остался id=5 (узел и state переиспользуются), появился новый id=9 (создать), исчез id=2 (удалить). Минимум DOM-операций, состояние всегда у своих данных.

Требования

• Стабильный: тот же элемент данных — тот же key между рендерами. Не Math.random(), не индекс в изменяемом списке (индексы «переезжают» при вставках/сортировке).
• Уникальный среди соседей (не глобально).
• Обычно — id из данных; индекс допустим только для статичного списка без состояния.

Дополнительно

key не виден компоненту в props; смена key — приём принудительного пересоздания компонента (сброс формы: <Form key={userId} />); при map по фрагментам — <React.Fragment key={...}>.

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

key даёт React идентичность элементов списка при диффе: переиспользование DOM и state, корректные вставки/удаления/перестановки вместо массового обновления «по позициям». Ключ — стабильный уникальный id из данных; индекс — только для статичных списков.