Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Однакові ключі (key) у списках». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Однакові ключі (`key`)** у списку призводять до того, що React втрачає здатність розрізняти елементи під час оновлення Virtual DOM, через що можуть відбуватися неочікувані та помилкові оновлення інтерфейсу. **Ключове:** якщо ключі повторюються, React вважає елементи одним і тим самим, навіть якщо їхні дані різні.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняЯкщо **ключі (**`key`**) у списку будуть однаковими**, React **втратить здатність розрізняти елементи** під час оновлення Virtual DOM. У підсумку можуть відбуватися **неочікувані та помилкові оновлення інтерфейсу**. --- ## Коротка відповідь Якщо ключі **неунікальні**, React: - **не зможе правильно зіставити елементи** між старим і новим Virtual DOM; - **може неправильно перемалювати елементи**, переплутавши порядок або вміст; - і навіть **втратити локальний стан** (наприклад, текст в інпуті, фокус, лічильники тощо). --- ## Чому це відбувається React використовує `key` під час **reconciliation** (узгодження): > «Який елемент із нового списку відповідає якому елементу зі старого?» Якщо у двох елементів однаковий `key`, React вважає, що це **один і той самий елемент**, навіть якщо їхні дані та порядок різні. --- ## Приклад проблеми ```javascript 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 замінить перший другим без видалення/створення нового вузла. Результат може бути непередбачуваним: - порядок елементів порушиться; - оновлення не відбудуться; - стан "приклеїться" до неправильного елемента. --- ## Приклад зі станом ```javascript 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 не зможе коректно оновлюватися. --- ## Що робити правильно 1. Завжди давай **унікальні та стабільні** ключі: ```javascript key={user.id} ``` 2. Якщо даних немає - можна використати **унікальний ідентифікатор**: ```javascript key={`${user.name}-${index}`} ``` 3. Ніколи не використовуй індекс масиву, якщо порядок може змінюватися: ```javascript // Погано key={index} ``` --- ## Підсумок | Ситуація | Що станеться | |---|---| | Унікальні ключі | React правильно зіставляє елементи | | Ключі, що повторюються | React плутає елементи, втрачає стан | | Немає ключів | React використовує індекси та попереджає в консолі | | Ключі змінюються на кожному рендері | React перестворює елементи заново (повільно) | --- > **Головна ідея:** > `key` потрібен, щоб React знав, *до якого елемента Virtual DOM належить конкретний вузол*. > Якщо ключі повторюються, React "втрачає пам'ять" і оновлює UI неправильно.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.