Na čo slúžia kľúče v JSX?

Kľúče v JSX pomáhajú Reactu určiť, ktoré prvky v zozname sa zmenili, boli pridané alebo odstránené. Poskytujú jedinečnú identifikáciu pre každý prvok v poli alebo iterácii.

• Optimalizácia renderovania: React efektívne aktualizuje iba tie prvky, ktoré sa zmenili, namiesto toho, aby znovu renderoval celý zoznam. Bez kľúčov môže mať React ťažkosti s určením zhody medzi starými a novými prvkami, čo vedie k menej efektívnym aktualizáciám.
• Udržiavanie stavu komponentov: Ak zoznam obsahuje komponenty so stavom, kľúče pomáhajú Reactu správne spojiť stav s príslušným prvkom, aj keď sa poradie prvkov zmení.
• Prevencia chýb: Použitie kľúčov pomáha vyhnúť sa potenciálnym chybám pri manipulácii so zoznamami, ako sú nesprávne aktualizácie alebo nesprávne zobrazenie údajov.

// Príklad použitia kľúčov pri renderovaní zoznamu
const items = ['Jablko', 'Banán', 'Čerešňa'];

const itemList = items.map((item, index) =>
  <li key={index}>{item}</li> // Použitie indexu ako kľúča je prijateľné, ale neodporúča sa, ak sa zoznam môže meniť
);

// Je lepšie použiť jedinečný ID z údajov, ak je dostupný
const data = [
  { id: 1, name: 'Jablko' },
  { id: 2, name: 'Banán' },
  { id: 3, name: 'Čerešňa' },
];

const dataList = data.map((item) =>
  <li key={item.id}>{item.name}</li> // Použitie jedinečného ID z údajov ako kľúča
);