Зачем нужен атрибут key при рендеринге списков в React?

React использует алгоритм сравнения виртуального DOM, чтобы обновлять только изменившиеся элементы.

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

Пример

items.map(item => (
  <li key={item.id}>{item.name}</li>
));

Почему это важно

1. React быстрее находит изменения.

2. Предотвращаются лишние перерисовки.

3. Сохраняется состояние компонентов.

Плохой пример

key={index}

Индекс может измениться при сортировке и удалении элементов.

Когда допустимо использовать индекс

1. Список статический.

2. Элементы не изменяются.

Вывод

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