Для чего нужно использовать ключи в React?

Ключи нужны, чтобы React мог сопоставить элементы списка между двумя рендерами: понять, какой элемент добавился, какой удалился, а какой просто сдвинулся.

Проблема без ключей

Алгоритм сравнения (reconciliation) без ключей сопоставляет детей по позиции. Вставка элемента в начало списка сдвигает все позиции — React посчитает, что изменился каждый элемент, и обновит все DOM-узлы, а состояние элементов (введённый текст, фокус) окажется у чужих строк.

С ключами

{messages.map((msg) => (
  <Message key={msg.id} text={msg.text} />
))}

React строит соответствие «key → элемент» и при вставке в начало понимает: существующие элементы те же (переиспользуем DOM и state), добавился один новый.

Требования к ключу

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

Бонус: сброс состояния через key

Смена key заставляет React размонтировать и заново смонтировать компонент — приём для сброса формы или переинициализации:

<ProfileForm key={userId} userId={userId} />

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

Ключи позволяют React отслеживать идентичность элементов списка между рендерами: переиспользовать DOM-узлы и состояние вместо пересоздания, корректно обрабатывать вставки и сортировки. Ключ — стабильный id из данных, уникальный среди соседей; индекс — только для статичных списков.