Важность ключей

Каждому элементу, возвращаемому из map, нужен key — стабильная уникальная метка для этого элемента:

{todos.map((todo) => <li key={todo.id}>{todo.text}</li>)}

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

Лучший key: настоящий id из ваших данных. Допустимо: любое уникальное и стабильное значение для каждого элемента (например, наши названия фруктов). Крайняя мера: индекс массива. Это ломает изменение порядка, потому что позиция — это не идентичность.