Как и когда использовать ключи в React

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

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

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

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

Вот хороший пример правильной установки ключа с использованием id в списке:

const CityList = () => {
  const cities = [
    { id: 1, name: 'New York', description: 'The Big Apple' },
    { id: 2, name: 'Chicago', description: 'The Windy City' },
    { id: 3, name: 'San Francisco', description: 'The Golden City' },
    { id: 4, name: 'Los Angeles', description: 'The City of Angels' },
  ];

  return (
    <div>
      <h1>U.S. cities</h1>
      <ul>
        {cities.map(city => (
          <li key={city.id}>
            <h2>{city.name}</h2>
            {city.description}
          </li>
        ))}
      </ul>
    </div>
  );
};

Если вы хотите узнать больше, предлагаем вам ознакомиться с некоторыми другими материалами!