Что будет если у всех элементов списка одинаковый key в React

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

Понимаете ли вы, для чего React нужен key при согласовании списка, и что он идентифицирует элемент между рендерами, а не просто нужен, чтобы консоль не ругалась. Ответ показывает, отлаживали ли вы список, который живёт своей жизнью.

Как отвечать

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

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

Ключ должен быть стабильным между рендерами и уникальным среди соседей, глобальной уникальности не требуется. Берут идентификатор записи, а если его нет, генерируют один раз при создании элемента и хранят вместе с данными.

{items.map((it) => <Row key={it.id} item={it} />)}

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

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

Пытаются прочитать key внутри компонента через пропсы. Это служебное значение, в пропсы оно не попадает, и если идентификатор нужен внутри, его передают отдельным свойством.

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

Третье: описывают дубликаты только как просадку производительности. Главная боль в некорректном состоянии: список выглядит правильно, а данные в полях принадлежат другим строкам, и такой баг ищут долго.