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

Атрибут key в React используется для уникальной идентификации элементов списка при их рендеринге. Это помогает React эффективно обновлять и перестраивать DOM, минимизируя количество операций.

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

Пример использования:

const items = ['яблоко', 'банан', 'вишня'];

function FruitList() {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
}

Здесь key={item} гарантирует, что каждый элемент списка имеет уникальный ключ, основанный на значении.