Зачем нужен атрибут key для рендера массива элементов в React?

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

Что происходит без key (или с индексом)

{users.map((user, i) => (
  <UserRow key={i} user={user} /> // индекс = фактически «без key»
))}

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

• перерендер всех строк вместо одной операции удаления;
• состояние строк перепутается: введённый текст, чекбоксы, фокус останутся на позициях, а не у своих данных;
• анимации появления/удаления сработают не там.

Что даёт правильный key

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

React строит соответствие по key: id=7 был → id=7 остался (узел переиспользуем без изменений), id=3 исчез (удалить), id=9 появился (создать). Минимум DOM-операций и состояние всегда у своего элемента.

Требования

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

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

key даёт React идентичность элементов массива: при обновлении он сопоставляет старые и новые элементы по ключу и переиспользует DOM и state, а не пересоздаёт всё по позициям. Без стабильного key перестановки списка ломают состояние строк и порождают лишние DOM-операции.