Однакові ключі (key) у списках
Якщо ключі (key) у списку будуть однаковими, React втратить здатність розрізняти елементи під час оновлення Virtual DOM.
У підсумку можуть відбуватися неочікувані та помилкові оновлення інтерфейсу.
Коротка відповідь
Якщо ключі неунікальні, React:
- не зможе правильно зіставити елементи між старим і новим Virtual DOM;
- може неправильно перемалювати елементи, переплутавши порядок або вміст;
- і навіть втратити локальний стан (наприклад, текст в інпуті, фокус, лічильники тощо).
Чому це відбувається
React використовує key під час reconciliation (узгодження):
«Який елемент із нового списку відповідає якому елементу зі старого?»
Якщо у двох елементів однаковий key,
React вважає, що це один і той самий елемент,
навіть якщо їхні дані та порядок різні.
Приклад проблеми
function App() {
const users = [
{ id: 1, name: "Alice" },
{ id: 1, name: "Maria" }, // duplicate key!
];
return (
<ul>
{users.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
}Що станеться:
- React бачить два
<li>зkey="1"; - під час оновлення він вважає їх одним і тим самим елементом;
- тому другий може не відмалюватися правильно, або React замінить перший другим без видалення/створення нового вузла.
Результат може бути непередбачуваним:
- порядок елементів порушиться;
- оновлення не відбудуться;
- стан "приклеїться" до неправильного елемента.
Приклад зі станом
function Item({ name }) {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>{name}: {count}</button>;
}
function App() {
const items = [
{ id: 1, name: "Apple" },
{ id: 1, name: "Banana" }, // duplicate key!
];
return items.map(item => <Item key={item.id} name={item.name} />);
}Тепер якщо ти натиснеш кнопку "Apple", React може оновити обидва елементи одночасно або взагалі не оновити другий, тому що не відрізняє їх один від одного.
React не видасть фатальну помилку
React не "зламається", але в консолі з'явиться попередження:
Warning: Encountered two children with the same key
Це сигнал, що Virtual DOM не зможе коректно оновлюватися.
Що робити правильно
- Завжди давай унікальні та стабільні ключі:
key={user.id}- Якщо даних немає - можна використати унікальний ідентифікатор:
key={`${user.name}-${index}`}- Ніколи не використовуй індекс масиву, якщо порядок може змінюватися:
// Погано
key={index}Підсумок
| Ситуація | Що станеться |
|---|---|
| Унікальні ключі | React правильно зіставляє елементи |
| Ключі, що повторюються | React плутає елементи, втрачає стан |
| Немає ключів | React використовує індекси та попереджає в консолі |
| Ключі змінюються на кожному рендері | React перестворює елементи заново (повільно) |
Головна ідея:
keyпотрібен, щоб React знав, до якого елемента Virtual DOM належить конкретний вузол. Якщо ключі повторюються, React "втрачає пам'ять" і оновлює UI неправильно.
Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.