Зачем нужен атрибут key в React? Что произойдёт, если key будет меняться?

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

Если key меняется между рендерами, React воспринимает элемент как новый, что приводит к удалению старого и созданию нового элемента. Это может вызвать потерю локального состояния компонента и лишние операции в DOM.

Пример:

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

// Правильно: ключ — уникальный и стабильный идентификатор
items.map(item => <li key={item}>{item}</li>)

// Неправильно: использование индекса как ключа, особенно если порядок меняется
items.map((item, index) => <li key={index}>{item}</li>)

Использование стабильных ключей важно для корректного и производительного обновления UI.