Что такое key в React и зачем они нужны?

В React key — это специальный проп, который используется для уникальной идентификации элементов в списках при их рендеринге.

Зачем нужны key:

• Оптимизация обновлений: React использует ключи, чтобы понять, какие элементы изменились, добавились или удалились при повторном рендере.
• Предотвращение ошибок: Без уникальных ключей React может неправильно сопоставить элементы, что приведёт к нежелательным побочным эффектам (например, сохранение состояния не того компонента).

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

• Ключ должен быть уникальным среди соседних элементов.
• Обычно используют уникальные идентификаторы из данных, а не индексы массива (чтобы избежать проблем при перестановках).

Пример:

const items = [{id: 1, name: 'A'}, {id: 2, name: 'B'}];

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

Таким образом, key помогает React эффективно обновлять DOM и поддерживать корректное состояние компонентов.