**Что такое атрибут key и для чего он используется?

Каждому JSX элементу в массиве нужно уникальное свойство key. React использует key , чтобы механизм Virtual DOM reconciliation мог эффективно сравнивать элементы при обновлении.

Когда у дочерних элементов есть ключи, React воспользуется ими, чтобы сопоставить потомков исходного дерева с потомками последующего дерева. Например, если добавить key к неэффективному примеру выше, преобразование дерева станет эффективнее:

<ul>
  <li key="2015">Санкт-Петербург</li>
  <li key="2016">Москва</li>
</ul>
 
<ul>
  <li key="2014">Ростов-на-Дону</li>
  <li key="2015">Санкт-Петербург</li>
  <li key="2016">Москва</li>
</ul>

Теперь React знает, что элемент с ключом '2014' — новый, а элементы с ключами '2015' и '2016' переместились.

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

<li key={item.id}>{item.name}</li>

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

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

Вдобавок перестановки элементов могут вызвать проблемы с состоянием компонента, когда в качестве ключей используются индексы. Экземпляры компонента обновляются и повторно используются на основе своих ключей. Если ключ является индексом, то перемещение элемента изменяет его. В результате состояние компонента для таких элементов, как неуправляемые <input>, может смешаться и обновиться неожиданным образом.

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

function App() {
  const [activeNote, setActiveNote] = useState()
 
  const handleClick = (note) => {
    setActiveNote(note)
  }
 
  return (
    <div className="notes-container">
      <NotesList notes={notes} onClick={handleClick} />
      <Note title={activeNote?.title} key={activeNote?.id} />
    </div>
  )
}

Проп key помогает React идентифицировать компонент. Его также можно использовать, чтобы сообщить React, что идентификатор компонента изменился и это вызовет полное повторное создание этого компонента. Добавим key={activeNote?.id} к компоненту <Note />.

// ...
  return (
    <div className="notes-container">
      <NotesList notes={notes} onClick={handleClick} />
      <Note title={activeNote?.title} key={activeNote?.id} />
    </div>
  );
}

Теперь, при изменении key React пересоздаст компонент <Note />.

Назад