Для чого потрібна властивість key під час рендерингу списків?

Повне пояснення

Що це і навіщо

• key – атрибут, що передається в JSX‑елементи списку. Він допомагає React визначити, який елемент змінився, додано чи видалено.

Ключові принципи

• key має бути унікальним серед братських елементів.
• Значення не повинно змінюватися при рендерингу (наприклад, індекс масиву не рекомендується).
• Якщо елемент має власний id у базі даних, це найкращий варіант.

Як працює

• При оновленні React порівнює новий список з попереднім за key.
• Якщо ключі збігаються, React оновлює лише змінивши елементи.
• Якщо ключі різні, React видаляє старий DOM‑елемент і створює новий.

Практика та реалізація

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

Тестування

• У Jest можна перевірити, що key присутній: expect(wrapper.find('li')).toHaveLength(items.length);

Оптимізація

• Правильний key зменшує кількість перерисувань, що покращує продуктивність.

Часті помилки

• Використання індексу як key → неправильне оновлення.
• Відсутність key у списку → React виведе попередження.
• Дублювання key → непередбачувана поведінка.

Висновок key – це механізм, що забезпечує ефективне оновлення списків у React. Його правильне використання критично для стабільності UI та продуктивності.