Poznaj nowy hook useId() wprowadzony w React 18

Hook useId() to nowy sposób generowania id zarówno po stronie klienta, jak i serwera w React 18.
Przed React 18 istniał podobny hook o nazwie useOpaqueIdentifier
, ale zawierał on wiele błędów i ograniczeń. useId to wersja ulepszona.
Izomorfizm w React
Aplikacja izomorficzna to taka, która dzieli prawie cały swój kod między serwerem i klientem. Przypomnijmy bardzo szybko, co oznaczają pojęcia po stronie klienta i po stronie serwera.
Renderowanie po stronie klienta
W przypadku renderowania po stronie klienta aplikacja jest ładowana przez klienta. W zależności od ilości danych przesyłanych z serwera proces ten może trwać długo, co nie jest korzystne dla naszych użytkowników.
Renderowanie po stronie serwera
Jednak w przypadku korzystania z renderowania po stronie serwera serwer wysyła dane gotowe do wyświetlenia na ekranie, co znacząco poprawia komfort użytkowania i wydajność.
React działa po obu stronach (klient i serwer). Dlatego na przykład Next.js poprawia wydajność za pomocą SSR.
Jaki problem jest rozwiązywany dzięki useId?
Na przykład, gdy pracujesz z formularzem, to za pomocą ID możesz połączyć kilka elementów HTML. Coś takiego:
Jest to idealne rozwiązanie, jednak czasami niemożliwe. Pracujesz z dynamicznymi i złożonymi aplikacjami. W związku z tym często stosowanym „rozwiązaniem” tego problemu jest coś podobnego do poniższego:
Problem pojawia się, gdy aplikacja jest wykonywana po obu stronach (klient i serwer), ponieważ ID nie będzie takie same. Dlatego też w momencie, gdy chcemy połączyć aplikacje z obu stron (czasem ze względu na dostępność), są one praktycznie różne. W takich przypadkach należy właśnie użyć useId
.
Wprowadzenie do useId()
Dzięki temu hookowi będziesz mógł wygenerować naprawdę unikalny ID i jeśli Twoja aplikacja będzie wykonywana po obu stronach, to będzie taki on sam.
Jeśli masz więcej niż jedno pole wprowadzania danych, nie musisz używać więcej niż jednego hooka useId
. Innymi słowy, używając prefiksów, można używać tylko jednego ID dla całego formularza.
Wniosek
Główne zmiany, które pojawiły się w React 18 dotyczą wydajności i ulepszeń UX. Ponieważ niektóre z technik zwiększania wydajności opierają się na SSR, często można spotkać się z wyżej wymienionym problemem związanym z ID.
Nie bez znaczenia jest więc fakt, że ten nowy hook został wprowadzony wraz z nową wersją.
Oryginał tekstu w języku angielskim przeczytasz tutaj.