Jak řadíte klíče v seznamech při práci s Reactem…

V Reactu jsou klíče používány k identifikaci prvků v seznamech při jejich vykreslování. Pomáhá Reactu efektivně aktualizovat uživatelské rozhraní tím, že určuje, které prvky se změnily, přidaly nebo odstranily.

Hlavní zásady rozmisťování klíčů:

Jedinečnost: Každý klíč musí být jedinečný mezi svými sousedními prvky v seznamu.
Stabilita: Klíč musí zůstat konstantní pro stejný prvek po celou dobu životnosti komponenty, i při opětovném vykreslení.

Optimální způsoby rozmisťování klíčů:

Použití unikátního identifikátoru dat: Pokud vaše data mají stabilní a jedinečné ID (například id z databáze), použijte ho jako klíč.

// Předpokládejme, že máte pole objektů s unikátním 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>
  );
}

Toto je nejvíce doporučený způsob, protože zajišťuje stabilitu klíče při jakýchkoli změnách v datech (přeuspořádání, přidání, odstranění).

Použití indexu pole (s opatrností): Pouze ve velmi specifických případech, kdy:
- Seznam je statický a nikdy se nemění.
- Prvky v seznamu se nikdy nepřeuspořádávají, nepřidávají nebo neodstraňují.
- Seznam se nefiltruje.
```
// Pouze pokud jsou items garantovaně nikdy neměnné
const items = ['Item 1', 'Item 2', 'Item 3'];

function StaticItemList() {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}
```
Důležité: Použití indexu jako klíče u nestabilních seznamů může vést k nesprávnému chování UI, ztrátě stavu prvků (například textu v inputu) nebo neefektivnímu renderování. React může znovu použít komponenty s nesprávnými daty kvůli nesprávnému přiřazení klíčů.

Generování klíče na základě kombinace dat: Pokud data nemají unikátní ID, lze vytvořit složený klíč na základě několika stabilních vlastností dat. Nicméně, to je méně preferované než použití jednoho ID.

// Příklad: kombinace jména a data
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>
  );
}

Shrnutí: preferovaným a bezpečným způsobem je vždy použití unikátního a stabilního identifikátoru dat. Použití indexu je oprávněné velmi zřídka a pouze pro statické seznamy.

Jak řadíte klíče v seznamech při práci s Reactem?