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

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

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

Пример:

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

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

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