Ключи

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

Для этого и нужен ключ: имя каждого элемента, по которому React его узнаёт. Ключ задают в атрибуте key у элемента, который возвращает map():

const stages = [
    { id: 1, name: "Главная сцена" },
    { id: 2, name: "Шатёр" },
    { id: 3, name: "Лесная сцена" },
];

export default function App() {
    return (
        <ul>
            {stages.map((stage) => (
                <li key={stage.id}>{stage.name}</li>
            ))}
        </ul>
    );
}

С ключом React знает, что элемент с ключом 3 — это «Лесная сцена», где бы он ни стоял в списке. А предупреждение из прошлого упражнения исчезает.

Правила для ключей:

• Ключ должен быть уникальным среди элементов одного списка. (У двух разных списков ключи могут совпадать.)
• У одного и того же элемента он должен оставаться прежним. Берите его из данных: обычно это id. Это одна из причин, почему у данных с серверов и из баз данных есть идентификаторы. Если элементы — тексты, которые не повторяются, ключом может быть сам текст: key={name}.
• Ключ не показывается на странице и не входит в пропсы: компонент не может его прочитать.

Почему не позиция в массиве? map() передаёт своей функции позицию вторым аргументом, и key={index} тоже убирает предупреждение. Но если группу добавить в начало, все остальные сдвинутся на одну позицию и получат новые ключи. Тогда React решит, что первый элемент — всё тот же, который он знал, и перепутает элементы. Что из этого выходит, вы увидите, когда элементы начнут помнить что-то своё (в уроке про состояние): лайки одной группы достанутся другой. Ключи из идентификаторов при смене порядка не меняются.