Каким условиям должен отвечать key?

Каким условиям должен отвечать key?

Key — это специальный prop в React, который помогает библиотеке идентифицировать элементы в списке. Это не обычный prop, который передаётся компоненту, а служебный параметр для самого React.

Основные условия для key

1. Уникальность в пределах списка

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

// ❌ Плохо — key не уникален
<ul>
  {items.map((item, index) => (
    <li key="item">{item.name}</li>  // Все элементы имеют один key
  ))}
</ul>

// ✅ Хорошо — уникальный key для каждого элемента
<ul>
  {items.map((item) => (
    <li key={item.id}>{item.name}</li>
  ))}
</ul>

2. Стабильность (не индекс массива)

Key не должен изменяться между рендерами, если это не необходимо. Индекс массива — это плохой выбор, особенно если список может изменяться.

// ❌ Плохо — индекс как key
{items.map((item, index) => (
  <input key={index} defaultValue={item.name} />
))}
// Если удалить первый элемент, input сохранит старое значение!

// ✅ Хорошо — стабильный ID
{items.map((item) => (
  <input key={item.id} defaultValue={item.name} />
))}

3. Предсказуемость

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

// ❌ Плохо — случайный key
{items.map((item) => (
  <li key={Math.random()}>{item.name}</li>  // Новый key при каждом рендере!
))}

// ✅ Хорошо — постоянный key
{items.map((item) => (
  <li key={item.id}>{item.name}</li>
))}

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

Хороший сценарий:

function TodoList({ todos }) {
  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>
          <input type="checkbox" checked={todo.done} />
          {todo.title}
        </li>
      ))}
    </ul>
  );
}

Сложный случай — если нет ID:

// Когда нет уникального ID, можно создать составной key
const items = [
  { firstName: 'John', lastName: 'Doe' },
  { firstName: 'Jane', lastName: 'Doe' }
];

{items.map((person) => (
  <div key={`${person.firstName}-${person.lastName}`}>
    {person.firstName} {person.lastName}
  </div>
))}

Почему это важно?

Когда key неправильный:

• Потеря состояния компонента — input'ы теряют фокус, значения микшируются
• Неверная позиция элементов — анимации работают неправильно
• Утечки памяти — хуки и контексты привязываются неправильно
• Проблемы производительности — React не может эффективно обновлять список

Когда key не нужен

Key требуется только для динамических списков (массивы, результаты .map()). Для статических элементов key необязателен:

// key не нужен — это одиночные элементы
<div>
  <Header />
  <Main />
  <Footer />
</div>

Итог

Key должен быть:

• Уникальным в пределах одного родителя
• Стабильным (не меняться между рендерами)
• Основан на данных, а не на индексе
• Предсказуемым для каждого элемента

Архитектура React полагается на правильные key для корректного управления состоянием и производительности компонентов.