Hoe rangschikt u de sleutels in lijsten bij het…

In React worden sleutels gebruikt om elementen in lijsten te identificeren tijdens het renderen. Dit helpt React om de gebruikersinterface efficiënt bij te werken door te bepalen welke elementen zijn veranderd, toegevoegd of verwijderd.

Basisprincipes voor het toewijzen van sleutels:

Uniekheid: Elke sleutel moet uniek zijn onder de naburige elementen in dezelfde lijst.
Stabiliteit: De sleutel moet constant blijven voor hetzelfde element gedurende de volledige levenscyclus van het component, zelfs bij her-renderen.

Optimaal manieren om sleutels toe te wijzen:

Gebruik van een unieke identifier van de gegevens: Als je gegevens een stabiele en unieke ID hebben (bijvoorbeeld id uit een database), gebruik die dan als sleutel.

// Stel dat je een array van objecten hebt met een unieke 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>
  );
}

Deze methode wordt het meest aanbevolen, omdat het de stabiliteit van de sleutel garandeert bij elke wijziging in de gegevens (herordening, toevoegen, verwijderen).

Gebruik van de index van de array (met voorzichtigheid): Alleen in zeer specifieke gevallen, wanneer:
- De lijst statisch is en nooit verandert.
- Elementen in de lijst nooit worden herordend, toegevoegd of verwijderd.
- De lijst niet wordt gefilterd.
```
// Alleen als items gegarandeerd nooit veranderen
const items = ['Item 1', 'Item 2', 'Item 3'];

function StaticItemList() {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}
```
Belangrijk: Het gebruik van de index als sleutel in niet-stabiele lijsten kan leiden tot onjuiste UI-gedragingen, verlies van de status van elementen (bijvoorbeeld tekst die in een input wordt ingevoerd), of inefficiënte rendering. React kan componenten opnieuw gebruiken met onjuiste gegevens vanwege een verkeerde koppeling van sleutels.

Genereren van een sleutel op basis van een combinatie van gegevens: Als je gegevens geen unieke ID hebben, kun je een samengestelde sleutel maken op basis van meerdere stabiele eigenschappen. Dit is echter minder aanbevolen dan het gebruik van een enkele ID.

// Voorbeeld: combinatie van naam en datum
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>
  );
}

Samenvattend: de meest aanbevolen en veilige manier is altijd het gebruik van een unieke en stabiele identifier van de gegevens. Het gebruik van de index is slechts in zeer zeldzame gevallen en alleen voor statische lijsten gerechtvaardigd.

Hoe rangschikt u de sleutels in lijsten bij het werken met React?