Зачем указывать ключи в списках React и как они работают

Что проверяют

Понимаете ли вы роль ключа в алгоритме сравнения и знаете ли, чем плох индекс массива.

Как отвечать

При обновлении React сравнивает старое дерево элементов с новым. Внутри списка без ключей сравнение идёт по позициям: первый элемент со первым, второй со вторым. Ключ даёт элементу идентичность, и тогда React понимает, что элемент не изменился, а переехал.

Что это меняет на практике: вставили новый элемент в начало списка. Без ключей React решит, что изменились все элементы, и обновит каждый. С правильными ключами он вставит один узел и оставит остальные нетронутыми вместе с их состоянием.

Именно состояние и делает индекс массива плохим ключом. Возьмём список полей ввода: при key={index} после вставки в начало ключ 0 достаётся уже другому элементу данных, а React считает его тем же самым и оставляет введённый текст, фокус и позицию прокрутки на месте. Текст оказывается не у того элемента.

Правила:

• ключ это стабильный идентификатор данных: id из базы, уникальный слаг;
• ключ должен быть уникальным среди соседей, а не глобально;
• ключ не передаётся в компонент как пропс, это служебное значение;
• Math.random() в ключе это худший вариант: элемент пересоздаётся на каждом рендере вместе со всем поддеревом.

Индекс допустим только тогда, когда список статичен: не сортируется, не фильтруется, элементы не добавляются и не удаляются.

Где спотыкаются

Ставят индекс по умолчанию и потом ищут, почему состояние строк перепутывается.

Считают, что ключи нужны только чтобы убрать предупреждение в консоли.

Пытаются прочитать props.key внутри компонента.

Генерируют ключ случайно, теряя всякий смысл сравнения.