6. Czy można stosować indeks jako klucz (key)?

Algorytm Reacta utrzymuje lekki wirtualny DOM. W przypadku zmian aktualizuje wirtualny DOM i porównuje go z rzeczywistym. Jeśli wykryje różnice, aktualizuje DOM.

Właściwość key służy Reactowi do identyfikowania elementów listy i śledzenia ich zmian. Jeśli renderowana jest lista elementów, react domyślnie przyjmuje indeks jako klucz, jednak zwraca uwagę (warning) aby przekazać własną wartość.

Klucz powinien być zawsze unikalny w kontekście danej listy elementów. Indeks nie jest unikalny, ponieważ w przypadku modyfikacji listy, elementy mogą zmienić swoje położenie.

Używanie indeksu jako key prop może wprowadzić pewne zagrożenie:

1. Wydajność: Załóżmy, że istnieje lista o 4 elementach. Jeśli zostanie dodany element na początku lub w środku listy, klucz key wszystkich następnych elementów na liście zostanie zmieniony, mimo że same komponenty nie uległy zmianie. React wykrywa zmianę klucza i uruchamia niepotrzebne przerenderowanie tych komponentów. Zakładając jednak, że każdy klucz jest unikalny - React wie, że nie musi przerenderowywać elementów które się nie zmieniły.

2. Błędne renderowanie: React potrafi pomylić stan komponentów. Dodanie nowego elementu na początku listy może sprawić, że odziedziczy on stan komponentu wyrenderowany z tym samym kluczem key wcześniej. Poprzedni komponent z kluczem key = 1 obecnie dostanie klucz 2 i również może zostać wyrenderowany tak, jakby posiadał stan komponentu, który miał ten klucz wcześniej. Szerzej ten problem opisano tutaj.

Kiedy indeks może zostac wykorzystany jako key?

1. Dane na liście nie są filtrowane, sortowane ani modyfikowane
2. Nie ma żadnego innego unikalnego identyfikatora, a zaimplementowanie go mogłoby być trudne