Как избежать проблем с порядком отображения элементов списка в UI при добавлении/удалении элементов массива (для чего нужен key)?

Зачем нужен key в React

Когда вы рендерите список элементов в React, каждый элемент должен иметь уникальный атрибут key. Этот атрибут позволяет React отслеживать, какие элементы были изменены, добавлены или удалены. Без key React вынужден пересоздавать все элементы списка при каждом обновлении, что может привести к потере состояния (например, введённого текста в поле) и неправильному порядку отображения.

Как работает сопоставление элементов

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

Практический пример

function TodoList({ todos }) {
  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
}

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

Почему не стоит использовать индекс массива как key

Использование индекса в качестве key может вызвать проблемы при добавлении или удалении элементов из середины списка. Например, если вы удалите первый элемент, все последующие элементы получат новые индексы, и React может неправильно сопоставить их, что приведёт к ошибкам в состоянии или порядке.

Вывод

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