22. Listy i klucze w React — dlaczego key jest ważny

Listy i klucze — React musi identyfikować elementy

Renderowanie list w React przez Array.map() zwraca tablicę JSX elementów. Każdy element musi mieć unikalny key prop — React używa go podczas reconciliation do identyfikacji które elementy się zmieniły, dodały lub usunęły. Błędne klucze (np. index tablicy) powodują subtelne bugi.

Każda aplikacja wyświetla listy danych z API. Błędy w kluczach powodują trudne do znalezienia bugi (błędne animacje, utracone fokus, niepoprawna aktualizacja elementów przy sortowaniu).

1. Wyjaśnić jak renderować listy w React przez map()
2. Opisać rolę prop key w algorytmie reconciliation
3. Pokazać różnicę między stabilnym ID a indeksem tablicy
4. Omówić kiedy indeks jest akceptowalny

1. Array.map() w JSX — każdy element tablicy → JSX element
2. Key prop — unikalny w obrębie listy, pomaga React identyfikować elementy
3. Stabilne klucze — item.id jest lepsze niż index tablicy
4. Problem z indeksem — reordering, dodawanie/usuwanie z początku
5. Zagnieżdżone listy — key musi być unikalny w obrębie poziomu

• Struktura minimalna

1. Wstęp — listy danych w UI
2. Rozdział 1: map() w JSX — renderowanie tablic
3. Rozdział 2: Key prop — rola w reconciliation, stabilność
4. Rozdział 3: Problem z indeksem
5. Podsumowanie
6. Bibliografia

Key to nie formalność — to system identyfikacji!

Pokaż animację lub diagram: lista przed i po reorder. Z index key — React myli elementy. Ze stable ID key — React wie dokładnie co się zmieniło.