Какое свойство нужно указывать спискам в React?
Основы React
Спискам нужно указывать key — специальный атрибут, по которому React отождествляет элементы между рендерами.
Как это выглядит
{users.map((user) => (
<UserRow key={user.id} user={user} />
))}key ставится на внешний элемент внутри map. Если возвращается несколько узлов — на <React.Fragment key={...}> (короткая форма <> пропсы не принимает).
Зачем
При сравнении деревьев React сопоставляет детей списка по ключу, а не по позиции: понимает, что элемент переместился, добавился или удалился. Это позволяет переиспользовать DOM-узлы и сохранённое состояние вместо массового обновления по позициям.
Без key (или с индексом в изменяемом списке) при вставке/удалении/сортировке состояние строк (ввод, чекбоксы, фокус) «переезжает» к чужим данным, а React обновляет все элементы.
Требования
- Стабильный — один и тот же для одного элемента данных между рендерами (id из данных; не
Math.random()). - Уникальный среди соседей (глобальная уникальность не нужна).
- Не индекс массива, если список меняется. Индекс допустим только для статичных списков без состояния.
Дополнительно
key не приходит в props компонента. Намеренная смена key — способ пересоздать компонент и сбросить его состояние (<Form key={userId} />).
Коротко для собеседования
Спискам нужен key — стабильный уникальный среди соседей идентификатор (обычно id из данных), который позволяет React сопоставлять элементы между рендерами и переиспользовать DOM и состояние. Индекс массива годится только для статичных списков; смена key пересоздаёт компонент.