Коротка відповідь
juniorКлючі у списках потрібні для стабільної ідентифікації елементів при рендерингу, щоб React міг ефективно оновлювати DOM. Використання індексів як ключів допустимо лише коли список статичний, не змінюється і не має динамічних вставок/видалень. У випадках, коли порядок елементів змінюється або дані асинхронні, слід застосовувати унікальні ідентифікатори з бекенду або UUID.
Повне пояснення
Ключі (key) в React – це атрибут, який допомагає бібліотеці відстежувати елементи списку між рендерингами. Якщо ключ змінюється, React розглядає елемент як новий і виконує повне перероблення, що збільшує витрати на оновлення.
Чому потрібні ключі?
- Стабільність: React порівнює новий і старий список за ключами, щоб визначити мінімальний набір змін.
- Оптимізація: без ключів React не може гарантувати, що елементи залишаться в тому ж порядку, і буде виконано зайві операції.
Чи можна використовувати індекси?
- Тільки при статичному списку: коли елементи не додаються, видаляються і порядок залишається незмінним. У такому випадку індекс не змінюватиметься, і React отримає стабільний ключ.
- У динамічних списках: індекси змінюються при вставці/видаленні, що призводить до «переіменування» елементів. Це викликає помилки у стані (наприклад, введені дані в полях зберігаються неправильно) і збільшує кількість переробок.
Коли використовувати унікальні ключі?
- Кожен елемент має власний ідентифікатор (наприклад,
idз БД або UUID). - Якщо дані приходять асинхронно, ключ повинен бути стабільним незалежно від порядку отримання.
Підсумок: індекси можна використовувати лише в простих, незмінних списках. Для більшості реальних застосунків слід надавати унікальні ключі, що гарантують правильну роботу React і зменшують ризик помилок у UI.