Для чего нужны ключи?
Продвинутые темы
Ключи (`key`) в React нужны, чтобы уникально идентифицировать элементы списка, помогая механизму согласования (reconciliation) понять, какие элементы добавились, удалились или переместились.
Зачем нужны
При рендере списка React сравнивает старое и новое дерево. key говорит, какой элемент «тот же самый» между рендерами — тогда React переиспользует и корректно обновляет DOM, а не пересоздаёт всё.
{users.map((user) => (
<li key={user.id}>{user.name}</li>
))}Что будет без key (или с плохим key)
- Без
keyReact предупреждает и использует индекс по умолчанию — возможны баги. - Индекс как key ломается при вставке/удалении/сортировке: React путает элементы, теряет состояние инпутов, делает лишние перерисовки.
{items.map((item, i) => <Row key={i} />)} // плохо при изменении порядкаПравила хороших ключей
- Уникальные среди соседей.
- Стабильные — не меняются между рендерами (id из данных, а не
Math.random()). - Индекс допустим только для статичных списков без переупорядочивания.
Коротко для собеседования
key уникально идентифицирует элементы списка для reconciliation: React понимает, что добавилось/удалилось/переместилось, и переиспользует DOM. Ключи должны быть уникальными и стабильными (id из данных). Индекс как key ведёт к багам при изменении порядка.