Что можно (а что нельзя) устанавливать в качестве key в React?

Question 1

Что можно (а что нельзя) устанавливать в качестве key в React?

Answer 1

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

Ключи имеют смысл только в контексте окружающего массива.

Например, если вы выделяете компонент ListItem, вам нужно присваивать ключ элементам <ListItem></ListItem> в массиве, а не элементам <li> в самом ListItem.

Придерживайтесь хорошему правилу: внутри вызова map() обязательно указывать ключи для элементов.

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

Ключи служат подсказкой для React, но они не передаются вашим компонентам. Если вам нужно то же самое значение в вашем компоненте, передайте его явно в виде свойства с другим именем
const content = posts.map((post) =>
<Post
key={post.id}
id={post.id}
title={post.title} />
);

Примеры:

function ListItem(props) {
const value = props.value;
return (
// Неправильно! Здесь не нужно указывать ключ:
<li key={value.toString()}>
{value}
</li>
);
}

function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
// Неправильно! Здесь должен быть указан ключ:
<ListItem value={number} />
);
return (
<ul>
{listItems}
</ul>
);
}

Корректное использование ключа
function ListItem(props) {
// Правильно! Здесь не нужно указывать ключ:
return <li>{props.value}</li>;
}

function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
// Правильно! Ключ должен быть указан внутри массива.
<ListItem key={number.toString()}
value={number} />

);
return (
<ul>
{listItems}
</ul>
);
}