Что рекомендуется использовать в качестве key?

Рекомендации по выбору ключей (key) в React

В React ключи (keys) используются для идентификации элементов в списках и помогают виртуальному DOM эффективно определять, какие элементы изменились, были добавлены или удалены. Правильный выбор ключей критически важен для производительности и корректности работы приложения.

Основные рекомендации:

1. Используйте стабильные уникальные идентификаторы

Наилучший вариант — уникальные ID из ваших данных:

// ХОРОШО: уникальный ID из данных
const todoItems = todos.map(todo => 
  <TodoItem key={todo.id} todo={todo} />
);

// ПЛОХО: индекс массива (в большинстве случаев)
const todoItems = todos.map((todo, index) => 
  <TodoItem key={index} todo={todo} /> // Антипаттерн!
);

2. Почему индекс массива — плохой выбор (в большинстве случаев):

• Изменение порядка элементов: При удалении/добавлении элементов индексы меняются, что может привести к некорректному обновлению состояния компонентов
• Производительность: React может пересоздавать компоненты вместо их перемещения
• Сохранение состояния: Компоненты могут потерять свое состояние при изменении порядка элементов

// Пример проблемы с индексами
const items = ['A', 'B', 'C'];
// После удаления 'A' индексы изменятся, что сбивает React

3. Критерии идеального ключа:

• Уникальность: Ключ должен быть уникальным среди соседних элементов
• Стабильность: Ключ не должен меняться между рендерами
• Предсказуемость: Ключ должен быть постоянным для одного и того же элемента данных

Рекомендуемые подходы:

А. Использование ID из базы данных

// Самый надежный вариант
const userList = users.map(user => (
  <UserCard key={`user-${user.id}`} user={user} />
));

Б. Генерация ключей на стороне клиента (когда нет ID)

import { v4 as uuidv4 } from 'uuid';

// Для временных данных
const initialItems = items.map(item => ({
  ...item,
  tempId: uuidv4() // Генерируем уникальный ID
}));

В. Комбинированные ключи для сложных структур

// Для вложенных данных или таблиц
const dataRows = data.map((row, rowIndex) => (
  <tr key={`row-${row.groupId}-${row.id}`}>
    {row.cells.map(cell => (
      <td key={`cell-${row.id}-${cell.columnId}`}>
        {cell.value}
      </td>
    ))}
  </tr>
));

Особые случаи и лучшие практики:

Когда можно использовать индекс массива:

1. Статические списки: Данные никогда не меняют порядок и не фильтруются
2. Нет состояния: Элементы списка не имеют внутреннего состояния
3. Нет идентификаторов: И нет возможности их добавить

// Приемлемый случай для индекса
const weekdays = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
const WeekdayList = () => (
  <ul>
    {weekdays.map((day, index) => (
      <li key={index}>{day}</li> // ОК, так как список статический
    ))}
  </ul>
);

Распространенные ошибки:

// НЕПРАВИЛЬНО: Неуникальные ключи
const items = data.map(item => (
  <div key="item">{item.name}</div> // Все ключи одинаковые!
));

// НЕПРАВИЛЬНО: Случайные значения в рендере
const items = data.map(item => (
  <div key={Math.random()}>{item.name}</div> // Ключ меняется каждый рендер!
));

// НЕПРАВИЛЬНО: Использование нестабильных данных
const items = data.map(item => (
  <div key={item.name}>{item.name}</div> // Имя может повторяться!
));

Производительность и отладка:

Инструменты для проверки ключей:

• React DevTools показывает предупреждения о дубликатах ключей
• Режим StrictMode помогает выявить проблемы с ключами
• Консольные предупреждения React

Паттерны для сложных случаев:

// 1. Составные ключи для группировок
const GroupedList = ({ groups }) => (
  <div>
    {groups.map(group => (
      <div key={`group-${group.id}`}>
        <h3>{group.name}</h3>
        {group.items.map(item => (
          <div key={`group-${group.id}-item-${item.id}`}>
            {item.name}
          </div>
        ))}
      </div>
    ))}
  </div>
);

// 2. Ключи для порталов и фрагментов
const ModalContainer = ({ modals }) => (
  <>
    {modals.map(modal => (
      <React.Fragment key={`modal-${modal.id}`}>
        {ReactDOM.createPortal(
          <ModalContent {...modal} />,
          document.getElementById('modal-root')
        )}
      </React.Fragment>
    ))}
  </>
);

Вывод:

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