PassFront
  1. PassFront
  2. База знаний
  3. Основы React

Какое свойство нужно указывать спискам в 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 пересоздаёт компонент.

Другие вопросы раздела