Kako raspoređujete ključeve u listama prilikom rada…

У React, кључеви се користе за идентификовање елемената у листама приликом њиховог рендеровања. Ово помаже React-у да ефикасно ажурира кориснички интерфејс, одређујући који су елементи променили, додати или уклоњени.

Основни принципи постављања кључева:

Јединственост: Свакој кључ треба да буде јединствена међу суседним елементима у листи.
Стабилност: Кључ треба да остане константан за исти елемент током целог животног циклуса компоненти, чак и при поновном рендеровању.

Оптимални начини постављања кључева:

Користите јединствени идентификатор података: Ако ваши подаци имају стабилан и јединствен ID (на пример, id из базе података), користите га као кључ.
```
// Предпоставимо да имате низ објеката са јединственим id
const items = [
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' },
];

function ItemList({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}
```
Ово је најпрепорученији начин, јер обезбеђује стабилност кључа при било којим променама у подацима (преуређивање, додавање, брисање).
Користите индекс у низу (са опрезом): Само у веома специфичним случајевима, када:
- Листа је статична и никада се не мења.
- Елементи у листи никада не преуређују, додају или бришу.
- Листа се не филтрира.
```
// Само ако су items гарантовано никада не мењани
const items = ['Item 1', 'Item 2', 'Item 3'];

function StaticItemList() {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}
```
Важно: Користећи индекс као кључ у нестабилним листама може довести до неправилног понашања UI, губитка стања елемената (на пример, уноса текста у input), или неефикасног рендеровања. React може поново користити компоненте са неправилним подацима због погрешног подударања кључева.

Генерисање кључа на основу комбинације података: Ако подаци немају јединствени ID, можете креирати сложени кључ на основу неколико стабилних својстава података. Међутим, то је мање пожељно од коришћења једног ID.

// Пример: комбиновање имена и датума
const events = [
  { name: 'Party', date: '2023-10-26' },
  { name: 'Meeting', date: '2023-10-27' },
];

function EventList({ events }) {
  return (
    <ul>
      {events.map(event => (
        <li key={`${event.name}-${event.date}`}>{`${event.name} - ${event.date}`}</li>
      ))}
    </ul>
  );
}

Резюме: најбољи и најсигурнији начин је увек коришћење јединственог и стабилног идентификатора података. Коришћење индекса је оправдано изузетно ретко и само за статичке листе.

Kako raspoređujete ključeve u listama prilikom rada sa React-om?