Зачем нужны key
Вопрос
Зачем React нужен key в списках и что будет, если поставить индекс?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
key сопоставляет элемент списка с предыдущим рендером
без него React сравнивает по позиции и переиспользует не тот узел
индекс ломается при вставке в начало, удалении и сортировке
симптом: съезжает состояние полей ввода и фокус
ключ должен быть стабильным и уникальным среди соседей
индекс допустим только для статического списка без перестановок
Что могут спросить следом
- Почему key нельзя брать из Math.random
- Что произойдёт с состоянием при смене key у компонента
- Как принудительно пересоздать компонент через key
Разбор
key - это идентификатор, по которому React сопоставляет элемент нового списка
с элементом старого. Без него сравнение идёт по позиции: вставил элемент в начало - React
считает, что изменились все, и переиспользует чужие DOM-узлы и состояние.
Симптом всегда один: пользователь ввёл текст во второй инпут, список переупорядочился - и текст оказался в третьем. То же с фокусом, анимацией и неконтролируемыми полями.
Ключ должен быть стабильным между рендерами и уникальным среди соседей - обычно id
из данных. Индекс годится только для списка, который не сортируется, не фильтруется
и не меняет длину сверху.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.