Данные

Списки: почему key должен быть стабильным

От массива статей к списку, который переживает сортировку.

Для отображения массива в JSX часто используют map. Если нужно скрыть часть записей, сначала применяют filter. React должен понимать, какая запись соответствует какому элементу при следующем обновлении.

const visible = articles.filter(article => article.published);

return (
  <ul>
    {visible.map(article => (
      <li key={article.id}>{article.title}</li>
    ))}
  </ul>
);

Идентичность записи

Выбирайте ключ из данных: например, идентификатор статьи. Он должен быть уникален среди соседних элементов и оставаться тем же при повторном рендере. Не создавайте key через Math.random() во время рендера.

Когда индекс мешает

Индекс массива меняется при вставке, удалении или сортировке. Если строка содержит собственное состояние или поле ввода, связь между данными и компонентом может нарушиться. Поэтому для изменяемых списков нужен стабильный идентификатор.

Практика

Добавьте сортировку по заголовку и кнопку удаления статьи. Проверьте, что введённый в строке комментарий остаётся у нужной записи. Помните: key используется самим React и не передаётся компоненту как обычный prop.