Hogyan rendezed a kulcsokat a listákban a React…

A Reactben a kulcsokat az elemek azonosítására használják listákban történő rendereléskor. Ez segít a Reactnek hatékonyan frissíteni a felhasználói felületet, meghatározva, mely elemek változtak, kerültek hozzáadásra vagy törlésre.

A kulcsok elhelyezésének alapelvei:

Egyediség: Minden kulcsnak egyedinek kell lennie a saját szomszédos elemei között egy listában.
Stabilitás: A kulcsnak állandónak kell maradnia ugyanazon elem esetében az egész komponens életciklusa során, még akkor is, ha újrarendereljük.

Optimális kulcskiosztási módszerek:

Az adatok egyedi azonosítójának használata: Ha az adataidnak van stabil és egyedi azonosítója (például az adatbázisból származó id), használd azt kulcsként.

// Tegyük fel, hogy van egy tömböd egyedi id-kkel
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>
  );
}

Ez a leginkább ajánlott módszer, mivel biztosítja a kulcs stabilitását bármilyen adatváltozás esetén (újrarendezés, hozzáadás, törlés).

A tömb indexének használata (óvatosan): Csak nagyon speciális esetekben, amikor:
- A lista statikus és soha nem változik.
- A lista elemei soha nem kerülnek újrarendezésre, hozzáadásra vagy törlésre.
- A lista nem szűrődik.
```
// Csak akkor, ha az items garantáltan soha nem változik
const items = ['Item 1', 'Item 2', 'Item 3'];

function StaticItemList() {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}
```
Fontos: Az index használata kulcsként instabil listák esetén rossz UI viselkedést, az elemek állapotának elvesztését (például szövegbevitel inputban), vagy nem hatékony renderelést eredményezhet. A React rossz adatokkal való újrafelhasználásra kényszerülhet a helytelen kulcspárosítás miatt.

Kulcs generálása az adatok kombinációja alapján: Ha az adatoknak nincs egyedi ID-jük, létrehozhatsz összetett kulcsot több stabil tulajdonság alapján. Ez azonban kevésbé ajánlott, mint az egyedi ID használata.

// Példa: név és dátum kombinálása
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>
  );
}

Összefoglalva: mindig a legjobb és legbiztonságosabb módszer az adatok egyedi és stabil azonosítójának használata. Az index használata csak nagyon ritka esetekben és csak statikus listák esetén indokolt.

Hogyan rendezed a kulcsokat a listákban a React használata közben?