Problem z subskrypcjami zewnętrznego store’a

Zewnętrzny store to dowolne źródło stanu znajdujące się poza drzewem React, na przykład store Redux, przeglądarkowe API takie jak matchMedia lub zwykły obiekt na poziomie modułu z własnym mechanizmem subskrypcji.

React nie zarządza tym stanem, dlatego musi subskrybować zmiany i odczytywać migawki, aby utrzymywać komponenty w synchronizacji z aktualną zawartością store.

Typowe podejście polega na wczytaniu wartości store do useState, a następnie użyciu useEffect do zasubskrybowania zmian i wywołania setState za każdym razem, gdy store się zmieni. Na pierwszy rzut oka wydaje się, że komponent pozostaje dzięki temu aktualny.

Rozwiązanie działa przy prostym, synchronicznym renderowaniu, ale ma subtelną wadę, która staje się widoczna, gdy React renderuje współbieżnie i może wstrzymywać lub rozpoczynać pracę ponownie w jej trakcie.

Tearing występuje, gdy różne części interfejsu wyświetlają różne wartości tego samego store podczas jednego przebiegu renderowania. Renderowanie współbieżne może przerwać i wznowić pracę, a w międzyczasie store może się zmienić.

Wynikiem jest niespójny ekran, na którym jeden komponent pokazuje starą wartość, a drugi nową — niespójność, która przed wprowadzeniem funkcji współbieżnych była w praktyce niemożliwa.

Wyobraźmy sobie wiele komponentów odczytujących store motywu podczas współbieżnego renderowania React. Jeśli użytkownik włączy tryb ciemny w połowie tego procesu, komponenty wyrenderowane przed zmianą pokażą jasny motyw, a te wyrenderowane po niej — ciemny.

Przez jedną klatkę ekran będzie częściowo jasny, a częściowo ciemny, ponieważ wartość store zmieniła się w trakcie renderowania, którego React nie potraktował atomowo.

Efekty są uruchamiane po zatwierdzeniu renderowania, dlatego subskrypcja oparta na useEffect nie może zagwarantować, że wartość odczytana podczas renderowania będzie zgodna ze store w chwili zatwierdzenia. Subskrypcja uruchamia się zbyt późno, aby zapobiec niespójnemu wyświetleniu.

Zanim efekt ponownie ustanowi subskrypcję i zaktualizuje stan, niespójna klatka może już zostać pokazana użytkownikowi.

Wcześniejsze eksperymentalne API o nazwie useMutableSource miało rozwiązać problem bezpiecznego odczytu zewnętrznego stanu podczas renderowania współbieżnego, ale jego API okazało się trudne do poprawnego użycia i nigdy nie zostało wydane jako stabilne.

Zespół React zastąpił je prostszym i wygodniejszym prymitywem, który zapewnia te same gwarancje spójności bez związanych z nim pułapek.

useSyncExternalStore to oficjalny hook służący do subskrybowania zewnętrznych store w sposób bezpieczny dla renderowania współbieżnego. Koordynuje on działanie z React, dzięki czemu odczyty pozostają spójne w całym renderowaniu i nie dochodzi do tearingu komponentów.

Stał się zalecanym prymitywem dla autorów bibliotek, którzy potrzebują niezawodnie łączyć zewnętrzny stan z React podczas renderowania współbieżnego.

Dotyczyło to bezpośrednio bibliotek stanu, które subskrybują zewnętrzne store, w tym Redux, MobX i Valtio. Każda z nich musiała przyjąć nowy prymityw, aby zachować bezpieczeństwo po wprowadzeniu funkcji współbieżnych.

Właśnie dlatego ich integracje z React zostały zaktualizowane tak, aby wewnętrznie wywoływać useSyncExternalStore zamiast polegać na starszym wzorcu useState z useEffect.

Hook gwarantuje, że każdy komponent odczytujący store podczas renderowania widzi ten sam snapshot, a także wymusza synchroniczne ponowne renderowanie, jeśli store zmieni się w sposób, który w przeciwnym razie doprowadziłby do tearingu.

To połączenie spójnego snapshotu i bezpieczeństwa współbieżności stanowi główną przewagę tego hooka nad ręcznie implementowanymi subskrypcjami.

Korzystając z useSyncExternalStore, zachowują Państwo poprawność subskrypcji w miarę rozwoju modelu renderowania Reacta. Korzystają Państwo z gwarancji zapewnianych przez framework zamiast niedoskonale implementować je samodzielnie.

Dzięki temu jest to trwały i zalecany sposób podłączania dowolnego zewnętrznego źródła prawdy do komponentów Reacta.

Proszę potwierdzić, co oznacza tearing we współbieżnym renderowaniu.

Zewnętrzne store'y działają poza Reactem, a naiwna subskrypcja oparta na useState i useEffect nie może zapobiec tearingowi, gdy renderowanie jest współbieżne. Efekty uruchamiają się zbyt późno, aby zapewnić spójność odczytów w ramach jednego renderowania.

useSyncExternalStore zastępuje porzucony useMutableSource i zapewnia spójny snapshot oraz bezpieczeństwo współbieżności. Biblioteki takie jak Redux, MobX i Valtio przyjęły go jako prymityw przygotowany na przyszłość do obsługi subskrypcji store'ów.