Какое предупреждение появится, если не указать key при рендере списка в React?

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

Атрибут key — это специальный строковый атрибут, который помогает React идентифицировать каждый элемент в списке. Когда вы рендерите массив данных с помощью map(), React использует key для сопоставления элементов до и после обновления. Это ключевая часть процесса согласования (reconciliation), который позволяет React минимизировать изменения в реальном DOM.

Почему возникает предупреждение?

Если key не указан, React выводит предупреждение в консоль браузера: Warning: Each child in a list should have a unique 'key' prop. Это не ошибка, а рекомендация. Без key React использует индекс элемента в массиве как неявный ключ, что может привести к неправильному обновлению состояния компонентов, особенно при добавлении, удалении или перестановке элементов.

Пример кода с предупреждением

function TodoList() {
  const items = ['Купить молоко', 'Позвонить другу', 'Сделать ДЗ'];
  return (
    <ul>
      {items.map((item) => (
        <li>{item}</li>  // key не указан — будет предупреждение
      ))}
    </ul>
  );
}

Как правильно использовать key

Используйте уникальный идентификатор из данных, например id:

function TodoList() {
  const items = [
    { id: 1, text: 'Купить молоко' },
    { id: 2, text: 'Позвонить другу' },
  ];
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.text}</li>
      ))}
    </ul>
  );
}

Если уникального id нет, можно использовать индекс, но это крайний случай, так как индекс нестабилен при изменении списка.

Вывод

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