Klucze mają znaczenie

Każdy element zwracany przez map potrzebuje key, czyli stabilnej, unikalnej etykiety dla tego elementu:

{todos.map((todo) => <li key={todo.id}>{todo.text}</li>)}

Dlaczego? Gdy tablica się zmienia, React porównuje nową listę ze starą. Klucze informują go, który element jest którym, dzięki czemu przenosi elementy zamiast tworzyć je od nowa, zachowując stan, fokus i animacje.

Najlepszy klucz: rzeczywiste id z Twoich danych. Dopuszczalne: dowolna wartość unikalna i stała dla każdego elementu (np. nazwy owoców). Ostateczność: indeks tablicy. Nie sprawdza się przy zmianie kolejności, ponieważ pozycja nie jest tożsamością.