Zastosowanie Actions w React 19 w praktyce: jak używać useActionState, use() oraz mechanizmu Compiler Retire

Wiele zespołów zwiększyło numer wersji React, ale nie zmieniało niczego innego. Flagi ładowania, obsługa błędów oraz optymistyczne aktualizacje, które napisali lata temu, wciąż istnieją w bazie kodu, ponieważ aktualizacja ich nie uszkodziła – po prostu stały się zbędne. Oto przegląd ręcznie napisanego kodu, który React 19 teraz za Ciebie obsługuje.

Wzorzec, który się powtarza

Otwórz niemal każdy komponent formularza w projekcie React 19 i zobaczysz tę samą strukturę. Istnieją trzy elementy stanu: jeden dla stanu ładowania, jeden dla błędu i jeden dla sukcesu. Znajduje się tam również asynchroniczny obsługa wysyłania danych, który wywołuje e.preventDefault(), włącza flagę ładowania, usuwa stary błąd, czeka na odpowiedź serwera, w bloku try włącza stan sukcesu, w bloku catch kopiuje komunikat do pola błędu, a w bloku finally wyłącza flagę ładowania.

To rozwiązanie jest standardem od chwili, gdy React stał się popularny, i funkcjonuje dobrze. W React 19 jest ono już również niepotrzebne. Jeden hook zajmuje się teraz obsługą zadań w toku, błędów oraz wyników, włączając w to uporządkowanie sekwencyjnych żądań. Większość zespołów tego nie zauważyła, ponieważ aktualizacja nie wymusiła żadnych zmian.

Co jest stabilne, a co nie

Najpierw krótka mapa, ponieważ niektóre artykuły opisują funkcje jako dostępne, mimo że tak nie jest.

Dostępne w stabilnej wersji React 19.x:

• Akcje oraz hooki na ich podstawie: useActionState, useFormStatus i useOptimistic.
• API use() do odczytywania obietnic i kontekstu podczas renderowania.
• ref jako zwykła właściwość, co sprawia, że forwardRef staje się przestarzały.
• Metadane dokumentu natywnego: tagi <title>, <meta> i <link> generowane z komponentów.
• React Compiler, który osiągnął wersję 1.0 w październiku 2025 roku i obsługuje wersje aż do React 17.
• Dodatki z wersji 19.2, takie jak <Activity> i useEffectEvent.

W chwili pisania nadal są to funkcje Canary lub eksperymentalne: komponent <ViewTransition> oraz Fragment Refs. Uważaj na wszystkie elementy, które korzystają z tych funkcji, jako z przestarzałych, i sprawdzaj notatki wydawnicze dotyczące wersji, którą faktycznie instalujesz.

Działania: nowy model stanu asynchronicznego

Główną koncepcją React 19 jest Action – funkcja asynchroniczna przekazywana do mechanizmu transformacji stanu. React przejmuje kontrolę nad wszystkim, co z tym związane: stanem w oczekiwaniu, obsługą błędów, aktualizacjami optymistycznymi oraz resetowaniem formularzy – wszystkimi tymi rzeczami, które zespoły wcześniej musiały pisać ręcznie.

useActionState, useFormStatus i useOptimistic to nie trzy niepowiązane ze sobą funkcje. Są to trzy różne perspektywy tego samego mechanizmu.

useActionState zastępuje wzorzec trzech flag

Zamiast używać trzech stanów – ładowania, błędu i sukcesu – piszesz funkcję Action, która otrzymuje poprzedni stan i dane formularza oraz zwraca następny stan. Przekazujesz ją wraz z stanem początkowym do useActionState. Ten hook zwraca trzy elementy: aktualny stan, funkcję do przekazania formularzowi oraz wartość logiczną isPending.

Komponent wtedy wykonuje trzy proste czynności. Atrybut action formularza otrzymuje bezpośrednio zwróconą funkcję. Przycisk jest wyłączony, gdy isPending ma wartość true. Ponadto wszelkie komunikaty są odczytywane z zwróconego stanu. Nie ma stanu ładowania, nie ma stanu błędu, nie ma try, catch ani finally, nie ma preventDefault ani ręcznego resetowania.

Przekazywanie funkcji do action jest celowe. Formularze HTML zawsze miały atrybut action, a React 19 ponownie go wykorzystał. Dzięki temu możliwe jest stopniowe ulepszanie funkcjonalności – formularz może zostać wysłany nawet bez JavaScriptu, a React ulepsza jego zachowanie po załadowaniu skryptów.

useFormStatus umożliwia przyciskowi poznanie jego formularza

Najlepszym zastosowaniem useFormStatus jest przycisk wysyłania, który można wielokrotnie używać. W jego wnętrzu hook zwraca flagę pending opisującą formę nadrzędną, bez przekazywania żadnych właściwości. Przy formie w stanie oczekiwania przycisk sam się dezaktywuje, a jego etykieta zmienia się na coś w rodzaju „Zapisywanie”. Wystarczy umieścić ten komponent w dowolnym miejscu wewnątrz formy, aby działał poprawnie, co eliminuje konieczność przekazywania właściwości na kilka poziomów w przypadku bardzo częstego zastosowania. Jedna uwaga: hook odczytuje stan formy, która otacza komponent, więc musi on być renderowany wewnątrz formy, a nie obok niej.

useOptimistic ułatwia zarządzanie natychmiastową informacją zwrotną

Optymistyczne aktualizacje pokazują użytkownikowi oczekiwany wynik od razu, zanim serwer to potwierdzi, i samodzielnie się korygują, jeśli żądanie zawiedzie. W wersji ręcznej wymagają tymczasowych identyfikatorów, oddzielnej listy pozycji w oczekiwaniu, logiki łączenia oraz kodu odwracającego zmiany w gałęzi błędów. Łatwo wtedy popełnić subtelne błędy.

Używając useOptimistic, przekazujesz hookowi prawdziwą listę wraz z małym reduktorem opisującym, jak dodać pozycję z oznaczeniem „w oczekiwaniu”. W metodzie action formy wywołujesz zwracany przez nią funkcję ustawiającą, a następnie czekasz na zapisanie danych. Interfejs natychmiast pokazuje nową pozycję, być może o zmniejszonej przejrzystości, dopóki nie zostanie zapisana. Gdy operacja się zakończy, prawdziwe dane zastępują wersję optymistyczną, a jeśli zapisanie zawiedzie, React sam powraca do poprzedniego stanu. Nie jest potrzebny żaden blok catch ani ręczne cofnięcie zmian.

use(): warunkowe pobieranie zasobów

use() to nowa API, która podczas renderowania odczytuje zasób, takiego jak obietnica lub kontekst. W odróżnieniu od wszystkich innych hooków, można ją wywołać warunkowo. Komponent może odczytać informacje o użytkowniku, wcześnie zwrócić wynik, gdy dane są ukryte, a dopiero potem odczytać preferencje. Otocz drzewo komponentów warstwą Suspense z opcją awaryjną, a React wstrzyma proces renderowania do chwili otrzymania danych.

Istnieje jedno ważne ograniczenie: obietnice przekazywane do use() muszą być stabilne pomiędzy różnymi renderingami, dlatego należy je tworzyć poza komponentem lub korzystać z warstwy cache’owania, takiej jak React Query lub SWR, albo nawet prostego mapowania na poziomie modułu klasyfikowanego według ID. Obietnica tworzona na każdym renderingu sprawia, że opcja awaryjna pozostaje na ekranie wiecznie.

ref jako atrybut

Ta zmiana jest prosta. Komponenty funkcyjne otrzymują teraz ref jako zwykłą właściwość, więc można ją przekazać dalej do elementu wejściowego bez otaczania komponentu funkcją forwardRef. Zachowanie pozostaje identyczne – brakuje jednego warstwa otaczającej i jednego importu. Istniejący kod wykorzystujący forwardRef nadal działa, ponieważ wycofywanie go odbywa się stopniowo i bez zakłóceń, ale nowe komponenty nie powinny go używać.

Kompilator React

Kompilator to najcichsza z wszystkich aktualizacji. Analizuje komponenty w czasie budowania i stosuje mechanizmy memoizacji, które zazwyczaj są ręcznie implementowane w sposób niejednolity za pomocą useMemo, useCallback i React.memo, albo są całkowicie pomijane. Tworzysz zwykłe komponenty, a kompilator poprawnie wstawia mechanizmy cacheowania.

Aby to wypróbować, zainstaluj plugin Babel babel-plugin-react-compiler i dodaj go do listy pluginów w konfiguracji Babel. Ponieważ obsługuje on również React 17 i 18, możesz go zastosować bez konieczności najpierw aktualizacji React, co pomaga zespołom utkniętym na danej wersji, które chcą skorzystać z korzyści wynikających z lepszej wydajności.

Uwaga dotycząca bezpieczeństwa komponentów serwerowych

Ostrzeżenia bezpieczeństwa dotyczące odmowy świadczenia usług oraz ujawnienia kodu źródłowego wpłynęły na pakiety react-server-dom-* na początku 2026 roku, a dla każdej obsługiwanej wersji opublikowano poprawione wydania. Jeśli używasz React Server Components, sprawdź swoją zainstalowaną wersję pod kątem aktualnych ostrzeżeń i użyj wersji poprawionej lub nowszej. Nie polegaj na pamięci co do tego, która wersja jest bezpieczna.

Co robić w tym tygodniu

• Nowe formy: od samego początku używaj useActionState – definiuj akcję, przekazuj ją do hooka i odczytuj wartość isPending z powrotnych danych, bez konieczności tworzenia ręcznie flag.
• Istniejące obsługiwanie zdarzeń: nie przepisuj wszystkiego od razu. Wybierz jedną z nich, przekształć ją w akcję i sprawdź, jak to działa. Poprawa czytelności jest zazwyczaj na tyle oczywista, że sama określa priorytet migracji.
• Kompilator: dodaj go do swojej konfiguracji budowania. Jest to niewielka zmiana, działa z istniejącym kodem i nie wymaga przepisywania, co czyni go najłatwiejszym rozwiązaniem z ery React 19 o najszerszym wpływie.
• Komponenty serwerowe: sprawdź swoją wersję pod kątem poprawek bezpieczeństwa.

Uroczyście zaprezentowane funkcje przyciągnęły uwagę przy premierze. Większa zmiana kryje się jednak w środku: Actions jako standardowy model dla wszelkich asynchronicznych zmian stanu, co po cichu eliminuje znaczną część kodu, który programiści React piszą każdego dnia. Wiele zespołów zaktualizowało swoje rozwiązania, ale kod wciąż czeka.