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