Dlaczego potrzebujesz propa key w React
Widzisz ten błąd w konsoli: "Each child in a list should have a unique 'key' prop."
Wielu programistów to ignoruje. To błąd. To ostrzeżenie informuje o problemach z wydajnością i potencjalnych błędach.
Czym jest prop key? Pomaga on Reactowi identyfikować konkretne elementy na liście. Informuje React, który element uległ zmianie, został przesunięty lub usunięty. Bez klucza React ponownie renderuje całą listę za każdym razem, gdy cokolwiek się zmienia. To spowalnia Twoją aplikację.
Wyobraź sobie bibliotekę z 1000 książkami. Jeśli dodasz nową książkę w środku, musisz przesunąć każdą inną książkę, aby zrobić miejsce. Klucz działa jak unikalne ID dla każdej książki. Pozwala on Reactowi znaleźć dokładne miejsce bez konieczności przesuwania wszystkiego innego.
Proces Reconciliation React używa algorytmu diffingu, aby porównać nowy Virtual DOM ze starym.
- Zmiana stanu (State).
- React buduje nowe drzewo.
- React porównuje drzewa za pomocą kluczy.
- React aktualizuje tylko zmienione elementy.
Częsty błąd: Używanie indeksu tablicy jako klucza.
Nigdy nie używaj key={index}, jeśli Twoja lista ulega zmianom. Jeśli dodajesz lub usuwasz elementy, indeks każdego z nich ulega przesunięciu. React pogubi się i ponownie wyrenderuje elementy, które w rzeczywistości nie uległy zmianie. Marnuje to pamięć i powoduje błędy w interfejsie użytkownika (UI).
Jak to naprawić:
- Użyj stabilnego ID z bazy danych (np.
user.id). - Użyj unikalnego ciągu znaków, takiego jak
uuid, jeśli Twoje dane nie posiadają ID. - Unikaj
Math.random()do tworzenia kluczy. Tworzy on nowe ID przy każdym renderowaniu, co wymusza ponowne montowanie (re-mount) komponentów i powoduje migotanie interfejsu (UI flickering).
Dobre praktyki:
- Klucze muszą być stabilne.
- Klucze muszą być unikalne wśród rodzeństwa (siblings).
- Używaj ID z bazy danych dla uzyskania najlepszej wydajności.
Tabela porównawcza kluczy: • Database ID: Zalecane. Stabilne i szybkie. • Array Index: Niezalecane. Powoduje błędy podczas sortowania lub filtrowania. • Math.random(): Unikaj. Powoduje niepotrzebne ponowne montowanie (re-mounts).
Podsumowanie dla Twojego workflow: Jeśli widzisz ten błąd, Twoje komponenty nie posiadają trwałego identyfikatora. Sprawdź odpowiedź API pod kątem unikalnych pól, takich jak e-mail lub ID. Napraw to, aby zaoszczędzić 30-40% na niepotrzebnych ponownych renderowaniach.