Čo sa stane, ak ako kľúč odovzdáte index poľa?

Použitie indexu poľa ako kľúča (key) v React môže viesť k problémom s výkonom a správnosťou aktualizácie komponentov. Pri zmene poradia prvkov alebo pri vkladaní/odstraňovaní prvkov sa indexy menia, a React môže nesprávne spárovať komponenty, čo spôsobí zbytočné prekrývanie alebo stratu stavu.

Napríklad, ak máte zoznam:

{items.map((item, index) => (
  <ListItem key={index} item={item} />
))}

A vložíte nový prvok na začiatok poľa, všetky kľúče sa posunú, a React takmer všetky komponenty znovu vytvorí, hoci by bolo možné aktualizovať len jeden.

Je lepšie používať jedinečné a stabilné identifikátory z údajov, napríklad id:

{items.map(item => (
  <ListItem key={item.id} item={item} />
))}