Что такое key в React?

key — специальный атрибут, по которому React идентифицирует элементы списка при сравнении старого и нового дерева (reconciliation).

Зачем нужен

Без key React сравнивает детей списка по позиции. Если в начало вставить элемент, React решит, что изменились все элементы, и перерендерит их. С key он поймёт, что элементы просто сдвинулись, и переиспользует существующие DOM-узлы и их состояние.

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

Правила выбора key

• Стабильный — не меняется между рендерами (id из данных, а не Math.random()).
• Уникальный среди соседей — глобальная уникальность не нужна.
• Не индекс массива, если список может меняться: при вставке/удалении/сортировке индексы «переезжают» на другие элементы.

Что ломается при неправильном key

Классический баг — список с инпутами и key по индексу: удаляешь первый элемент, а введённый текст «перепрыгивает» в чужую строку, потому что React сопоставил состояние по индексу, а не по данным.

Дополнительно

• key не передаётся в props — компонент его не видит.
• Смена key — способ принудительно пересоздать компонент со сбросом состояния: <Editor key={documentId} />.
• Индекс допустим для статичных списков, которые не меняются и не имеют состояния.

Коротко для собеседования

key помогает React сопоставить элементы списка между рендерами, чтобы переиспользовать DOM и состояние, а не пересоздавать их. Ключ должен быть стабильным и уникальным среди соседей — обычно id из данных. Индекс опасен для изменяемых списков; смена key намеренно пересоздаёт компонент.