Skip to main content
Практика завдань

Чому в React потрібен ключ?

key — це спеціальний проп у React, який використовується для унікальної ідентифікації елементів у списках. Він допомагає React правильно управляти станом елементів, коли їх додають, видаляють або змінюють порядок. Це особливо важливо при роботі з динамічно змінюваними даними.

Чому key?

  • Оптимізація рендерингу. Коли елементи списку змінюються, React використовує key, щоб визначити, які елементи змінилися, були додані або видалені. Це дозволяє React мінімізувати зміни в DOM і покращити продуктивність.
  • Унікальна ідентифікація. Кожен елемент списку повинен мати унікальний key, щоб React міг правильно відстежувати та управляти кожним елементом. Це важливо для коректного рендеринг та ефективних оновлень.

Приклад використання key

jsx
const items = ["apple", "banana", "cherry"]; function FruitList() { return ( <ul> {items.map((item, index) => ( <li key={index}>{item}</li> ))} </ul> ); }

Не використовуйте index як key:

Використання index може призвести до некоректного рендеринг елементів, коли їх порядок змінюється. Краще використовувати унікальні ідентифікатори для key.

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?
Практика завдань