Jak układasz klucze na listach podczas pracy z React…

W React klucze służą do identyfikacji elementów na liście podczas renderowania. Pomaga to Reactowi efektywnie aktualizować interfejs użytkownika, określając, które elementy się zmieniły, zostały dodane lub usunięte.

Podstawowe zasady przypisywania kluczy:

Unikalność: Każdy klucz musi być unikalny wśród sąsiednich elementów w tej samej liście.
Stabilność: Klucz musi pozostać stały dla tego samego elementu przez cały cykl życia komponentu, nawet podczas ponownego renderowania.

Optymalne metody przypisywania kluczy:

Użycie unikalnego identyfikatora danych: Jeśli Twoje dane mają stabilny i unikalny ID (np. id z bazy danych), użyj go jako klucza.

// Załóżmy, że masz tablicę obiektów z unikalnym 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>
  );
}

Ta metoda jest najbardziej zalecana, ponieważ zapewnia stabilność klucza przy wszelkich zmianach danych (zmiana kolejności, dodanie, usunięcie).

Użycie indeksu tablicy (z ostrożnością): Tylko w bardzo specyficznych przypadkach, gdy:
- Lista jest statyczna i nigdy się nie zmienia.
- Elementy na liście nigdy nie są re-ordery, dodawane lub usuwane.
- Lista nie jest filtrowana.
```
// Tylko jeśli items gwarantują, że nigdy się nie zmienią
const items = ['Item 1', 'Item 2', 'Item 3'];

function StaticItemList() {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}
```
Ważne: Użycie indeksu jako klucza w niestabilnych listach może prowadzić do nieprawidłowego zachowania UI, utraty stanu elementów (np. tekstu wpisanego w input) lub nieefektywnego renderowania. React może ponownie używać komponentów z nieprawidłowymi danymi z powodu błędnego dopasowania kluczy.

Generowanie klucza na podstawie kombinacji danych: Jeśli Twoje dane nie mają unikalnego ID, można utworzyć klucz złożony na podstawie kilku stabilnych właściwości danych. Jednak jest to mniej preferowane niż użycie pojedynczego ID.

// Przykład: łączenie nazwy i daty
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>
  );
}

Podsumowując: najbezpieczniejszym i najbardziej preferowanym sposobem jest zawsze użycie unikalnego i stabilnego identyfikatora danych. Użycie indeksu jest uzasadnione tylko w bardzo rzadkich przypadkach i tylko dla statycznych list.

Jak układasz klucze na listach podczas pracy z React?