PassFront
  1. PassFront
  2. База знаний
  3. Продвинутые темы

Для чего нужны ключи?

Продвинутые темы

Ключи (`key`) в React нужны, чтобы уникально идентифицировать элементы списка, помогая механизму согласования (reconciliation) понять, какие элементы добавились, удалились или переместились.

Зачем нужны

При рендере списка React сравнивает старое и новое дерево. key говорит, какой элемент «тот же самый» между рендерами — тогда React переиспользует и корректно обновляет DOM, а не пересоздаёт всё.

{users.map((user) => (
  <li key={user.id}>{user.name}</li>
))}

Что будет без key (или с плохим key)

  • Без key React предупреждает и использует индекс по умолчанию — возможны баги.
  • Индекс как key ломается при вставке/удалении/сортировке: React путает элементы, теряет состояние инпутов, делает лишние перерисовки.
{items.map((item, i) => <Row key={i} />)} // плохо при изменении порядка

Правила хороших ключей

  • Уникальные среди соседей.
  • Стабильные — не меняются между рендерами (id из данных, а не Math.random()).
  • Индекс допустим только для статичных списков без переупорядочивания.

Коротко для собеседования

key уникально идентифицирует элементы списка для reconciliation: React понимает, что добавилось/удалилось/переместилось, и переиспользует DOM. Ключи должны быть уникальными и стабильными (id из данных). Индекс как key ведёт к багам при изменении порядка.

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