Cum organizați cheile în listele atunci când lucrați…

În React, cheile sunt utilizate pentru a identifica elementele din liste în timpul randării. Acest lucru ajută React să actualizeze eficient interfața utilizatorului, determinând ce elemente s-au schimbat, au fost adăugate sau eliminate.

Principii de bază pentru atribuirea cheilor:

Unicitate: Fiecare cheie trebuie să fie unică între elementele vecine din aceeași listă.
Stabilitate: Cheia trebuie să rămână constantă pentru același element pe durata întregului ciclu de viață al componentului, chiar și la re-randare.

Metode optime de atribuire a cheilor:

Utilizarea unui identificator unic al datelor: Dacă datele tale au un ID stabil și unic (de exemplu, id dintr-o bază de date), folosește-l ca cheie.

// Presupunem că ai un array de obiecte cu un id unic
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>
  );
}

Această metodă este cea mai recomandată, deoarece asigură stabilitatea cheii în orice modificare a datelor (reordonare, adăugare, ștergere).

Utilizarea indexului array-ului (cu precauție): Doar în cazuri foarte specifice, când:
- Lista este statică și nu se schimbă niciodată.
- Elementele din listă nu sunt niciodată reordonate, adăugate sau eliminate.
- Lista nu este filtrată.
```
// Doar dacă items garantează că nu se schimbă niciodată
const items = ['Item 1', 'Item 2', 'Item 3'];

function StaticItemList() {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}
```
Important: Utilizarea indexului ca și cheie în liste nesigure poate duce la comportamente incorecte ale UI-ului, pierderea stării elementelor (de exemplu, textul introdus într-un input) sau renderizare ineficientă. React poate reutiliza componente cu date incorecte din cauza unei potriviri greșite a cheilor.

Generarea unei chei bazate pe o combinație de date: Dacă datele tale nu au un ID unic, poți crea o cheie compusă bazată pe mai multe proprietăți stabile. Totuși, aceasta este mai puțin preferată decât utilizarea unui ID unic.

// Exemplu: combinarea numelui și datei
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>
  );
}

Rezumat: metoda preferată și sigură este întotdeauna utilizarea unui identificator unic și stabil al datelor. Utilizarea indexului este justificată extrem de rar și doar pentru liste statice.

Cum organizați cheile în listele atunci când lucrați cu React?