Що робить key у списках?

ReactJunior~2 хв читання

Коротка відповідь

key - це унікальний ідентифікатор елемента у списку, який React використовує під час reconciliation (порівняння Virtual DOM-дерев), щоб розуміти, який елемент залишився, який змінився, а який додався або видалився.

Навіщо потрібен `key`

Коли React перемальовує список, він порівнює старий і новий Virtual DOM.

Без key React не знає, який елемент відповідає якому - і може перемалювати все заново. З key він точно знає, який елемент залишився тим самим, і оновлює лише зміни.

Приклад без `key`

javascript

const items = ['A', 'B', 'C'];

return (
  <ul>
    {items.map(item => <li>{item}</li>)}
  </ul>
);

Тепер ти додаєш новий елемент на початок:

javascript

['X', 'A', 'B', 'C']

React бачить новий Virtual DOM і:

не може зіставити старі елементи з новими;
думає, що всі <li> змінилися;
перемальовує весь список, навіть якщо змінювався лише один елемент.

Це може викликати:

втрату стану (наприклад, фокус вводу);
блимання під час анімацій;
зайві оновлення DOM → зниження продуктивності.

Приклад з `key`

javascript

const items = ['A', 'B', 'C'];

return (
  <ul>
    {items.map(item => <li key={item}>{item}</li>)}
  </ul>
);

Тепер при додаванні "X":

React порівнює старі й нові ключі: ["A", "B", "C"] → ["X", "A", "B", "C"]
Розуміє, що додався новий елемент "X", а решта залишилися незмінними;
Оновлює лише один рядок у реальному DOM.

Правила для `key`

Ключ має бути унікальним серед сусідів

javascript

<li key={user.id}>{user.name}</li>

Не використовуй індекс масиву (index) як key, якщо список може змінюватися (додавання, видалення, сортування):

javascript

// Погано
items.map((item, i) => <li key={i}>{item}</li>);

→ React може переплутати елементи, і ти втратиш стан. 3. Підходить стабільний ідентифікатор (наприклад, id з БД):

javascript

items.map(item => <li key={item.id}>{item.name}</li>);

Приклад зі станом усередині списку

javascript

function Item({ label }) {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{label}: {count}</button>;
}

function App() {
  const [items, setItems] = useState(["A", "B", "C"]);

  return (
    <>
      <button onClick={() => setItems(["X", ...items])}>Додати на початок</button>
      {items.map(item => <Item key={item} label={item} />)}
    </>
  );
}

З key={item} кожен <Item> зберігає свій стан під час перестановок. Без key або з key={index} - усі кнопки "скинуться", тому що React подумає, що це нові компоненти.

Підсумок

Що робить `key`	Навіщо потрібен
Унікально ідентифікує елемент	Щоб React знав, який елемент змінився
Допомагає при diffing (reconciliation)	Для мінімальних оновлень DOM
Запобігає втраті стану	При додаванні, видаленні, сортуванні
Не видно в DOM	Лише для внутрішнього механізму React

Головне правило

Завжди додавай унікальний, стабільний key для елементів у списках. Не використовуй індекс масиву, якщо порядок може змінюватися.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.