Заметки про React(@ru_react_notes). Использование пропа key в React для эффективного рендера В документации React для лучшей производит

Использование пропа key в React для эффективного рендера В документации React для лучшей производительности списков советуют использовать в качестве key уникальный id элемента. Но что будет, если использовать в качестве key текущий индекс элемента? Чтобы разобраться с этим, давайте изучим, как работает проп key. Если обобщенно, то он используется для идентификации элементов одного типа в списке при ререндере элементов. Например, есть два списка элементов:

const ItemMemo = React.memo(Item);

const CountriesList = ({ countries }) => {
  const [sort, setSort] = useState('asc');
  const sortedCountries = orderBy(countries, 'name', sort);
  const button = <button onClick={() => setSort(sort === 'asc' ? 'desc' : 'asc')}>toggle sorting: {sort}</button>;

  return (
    <div>
      {button}
      {sortedCountries.map((country) => (
        <ItemMemo country={country} key={country.id} />
      ))}
      {sortedCountries.map((country, index) => (
        <ItemMemo country={country} key={index} />
      ))}
    </div>
  );
};

В качестве триггера для ререндера будет использоваться кнопка, которая меняет сортировку элементов. В случае, когда в key используется текущий индекс, при ререндере списка у первого элемента всегда будет key = 0. React считает элементы одинаковыми, если у них одинаковый key. Поэтому при использовании в качестве key текущий индекс массива, элементы списка всегда будут считаться одинаковыми. Но проп country у элементов будет другой, поэтому будет происходить ререндер мемоизированного компонента. Для списка, где в key используется id, при ререндере элементов React идентифицирует одинаковые элементы и не происходит ререндера элементов. www.developerway.com/posts/r…ttribute