Зачем нужны `key` в списках React?

Question

Accepted Answer

## Сначала картина целиком

Атрибут `key` помогает React сопоставить элементы списка между рендерами: понять, какой элемент добавили, удалили или переместили, а не пересоздавать узлы наугад по позиции.

```jsx
{todos.map(todo => (
  <TodoItem key={todo.id} todo={todo} />
))}
```

Без стабильных `key` reconciliation хуже угадывает идентичность → лишние mount/unmount, сброс локального state детей, баги с фокусом ввода, «поехавшие» анимации и чекбоксы.

Требования к хорошему `key`:
- уникален среди соседей (siblings), не обязан быть глобально уникальным во всём приложении;
- стабилен между рендерами для одной и той же сущности данных;
- лучше осмысленный id из бэкенда/домена, чем `Math.random()` на каждый рендер (случайный ключ ещё хуже индекса);
- не используйте один и тот же ключ для разных типов элементов вперемешку без нужды.

Техническая деталь: `key` — служебный сигнал для React, он **не** попадает в компонент как `props.key`. Если id нужен внутри — передайте отдельным пропом `id={todo.id}`.

На собеседовании часто сразу спрашивают про index — будьте готовы связать темы.

Отдельно: `key` влияет только на согласование соседей в одном родителе. Он не заменяет `id` в данных и не делает элемент «глобально уникальным» в приложении. Если список виртуализирован или разбит на секции — ключи всё равно должны быть стабильны внутри каждой группы siblings.

## Итог

`key` — стабильный идентификатор элемента списка для корректного diff и сохранения state узлов.