Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Ключі (key) і рендер». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**React** порівнює елементи списку за ключами (`key`), щоб розуміти, які елементи в списку залишилися тими самими, а які додалися, видалилися або помінялися місцями. **Ключове:** це дозволяє React ефективно оновлювати DOM, не перестворюючи весь список.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняReact **порівнює елементи списку за ключами (**`key`**)**, щоб **розуміти, які елементи в списку залишилися тими самими**, а які **додалися, видалилися або помінялися місцями**, і тим самим **ефективно оновлювати DOM**, не перестворюючи весь список. --- ## Простіше кажучи: Коли в тебе є список елементів (наприклад, через .map()), React має зрозуміти: > «Який із нових елементів відповідає якому старому?» Для цього йому потрібен унікальний ідентифікатор - key. Без ключа React просто зіставлятиме елементи за позицією (0-й з 0-м, 1-й з 1-м тощо), що може призвести до несподіваних ререндерів і багів. --- ## Приклад без ключів ```javascript function List() { const [items, setItems] = useState(['A', 'B', 'C']); return ( <ul> {items.map(item => <li>{item}</li>)} </ul> ); } ``` Якщо тепер поміняти масив на: ```javascript ['B', 'A', 'C'] ``` React порівняє елементи за індексом: | Старе дерево | Нове дерево | Рішення React | |---|---|---| | A (index 0) | B (index 0) | замінити A → B | | B (index 1) | A (index 1) | замінити B → A | | C (index 2) | C (index 2) | залишити | У підсумку React видалить обидва `<li>` і створить нові, хоча насправді елементи просто помінялися місцями. --- ## Приклад із ключами ```javascript <ul> {items.map(item => <li key={item}>{item}</li>)} </ul> ``` Тепер React порівнює за key: | Старе дерево | Нове дерево | Рішення React | |---|---|---| | key="A" | key="B" | видалити A, додати B | | key="B" | key="A" | видалити B, додати A | | key="C" | key="C" | залишити | Але завдяки key React розуміє, що елементи **A** і **B** існують, просто помінялися місцями, і він **не перестворює їх**, а **переставляє**. --- ## Чому це важливо Без ключів React: - втрачає зв'язок між старими і новими елементами; - скидає стан дочірніх компонентів (наприклад, input втрачає фокус); - виконує зайві оновлення DOM (повільніше); - може спричинити візуальні баги (наприклад, блимання). --- ## Як React використовує key під час diffing Під час reconciliation (узгодження) React проходить по списку: 1. Порівнює старе і нове дерево. 2. Використовує key, щоб зрозуміти, чи відповідає елемент старому вузлу. 3. Якщо key збігається, повторно використовує елемент (лише оновлює props). 4. Якщо key новий, створює елемент. 5. Якщо key зник, видаляє елемент. --- ## Приклад зі станом у списку ```javascript function TodoList({ todos }) { return ( <ul> {todos.map(todo => ( <li key={todo.id}> <input type="checkbox" checked={todo.done} /> {todo.text} </li> ))} </ul> ); } ``` Якщо в кожного todo унікальний id, React: - збереже стан checked під час перестановок; - не перестворить увесь `<li>`; - просто оновить змінені поля. Якщо не задати ключі, то під час зміни порядку: - React перестворить усі `<li>`; - скине всі input; - і інтерфейс «блимне». --- ## Правила для key | Правило | Чому | |---|---| | key має бути унікальним серед сусідів | Щоб React розрізняв елементи | | Стабільний (не змінюється між рендерами) | Інакше React подумає, що елемент новий | | Не використовувати індекс масиву як ключ | Змінюється при перестановці елементів | | Краще використовувати унікальний id із даних | Гарантує коректну поведінку | --- ## Підсумок | Навіщо потрібні ключі (key) | Що робить React | |---|---| | Ідентифікують елементи списку | Допомагають React «зрозуміти», що змінилося | | Прискорюють reconciliation | React оновлює лише потрібні вузли | | Зберігають стан дочірніх компонентів | Не втрачається фокус, ввід, чекбокси тощо | | Без ключів React порівнює за індексом | Спричиняє зайві перемальовування і баги |Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.