Зачем нужны key в списках в JSX?

Зачем нужны key в списках в JSX?

При рендеринге списков в React каждый элемент должен иметь уникальный атрибут key. Это необходимо для механизма согласования (reconciliation), который React использует для эффективного обновления DOM. Без key React не может точно определить, какие элементы были изменены, добавлены или удалены, и будет вынужден перерисовывать весь список, что снижает производительность.

Как это работает?

Когда React обновляет список, он сравнивает текущее и новое состояние. Key позволяет React сопоставить элементы из старого и нового списка, минимизируя количество изменений в DOM. Например, если вы добавляете элемент в начало списка, React с key поймет, что остальные элементы остались на месте, и просто вставит новый. Без key он перерисует все элементы.

Пример кода

// Правильное использование key
const items = [{ id: 1, text: 'A' }, { id: 2, text: 'B' }];
const list = items.map(item => <li key={item.id}>{item.text}</li>);

// Неправильное использование key (индекс)
const listBad = items.map((item, index) => <li key={index}>{item.text}</li>);
// При изменении порядка или добавлении элементов в начало, индексы сбиваются, что может вызвать ошибки.

Вывод

Используйте уникальные и стабильные значения для key, такие как ID из базы данных. Избегайте использования индекса массива, если порядок элементов может меняться. Это обеспечит корректную работу React и высокую производительность приложения.