useLayoutEffect do pomiarów przed animacją

Czasami element podczas pierwszego renderowania wyraźnie przeskakuje lub miga, zanim znajdzie się na właściwym miejscu. Zwykle dzieje się tak, gdy pomiar lub zmiana położenia elementu następuje dopiero po tym, jak przeglądarka już go wyrenderowała.

Użytkownik przez jedną klatkę widzi nieprawidłowe położenie, a następnie nagłą korektę, co wygląda jak błąd.

useEffect uruchamia się po wyrenderowaniu przez przeglądarkę. Jeśli więc w useEffect odczytany zostanie pomiar i zaktualizowany DOM, użytkownik zdąży już zobaczyć niepoprawioną klatkę, zanim zmiana zostanie zastosowana.

W przypadku pozycjonowania elementów, które musi być niewidoczne dla użytkownika, wykonanie operacji po renderowaniu następuje zbyt późno.

useLayoutEffect uruchamia się synchronicznie po zmodyfikowaniu DOM-u przez React, ale przed renderowaniem przez przeglądarkę. Każdy odczyt lub zapis DOM-u wykonany w tym miejscu zostanie zastosowany, zanim użytkownik zobaczy choćby jedną klatkę.

Dlatego jest to właściwe narzędzie do pomiarów i pozycjonowania, które od początku musi wyglądać poprawnie.

Wewnątrz useLayoutEffect można odczytać układ elementu za pomocą ref.current.getBoundingClientRect(), aby zapisać jego położenie i rozmiar przed rozpoczęciem animacji.

Ponieważ kod ten wykonuje się przed renderowaniem, można jednocześnie wykonać pomiar i zastosować początkową transformację bez widocznego migotania.

FLIP to skrót od First, Last, Invert, Play. Najpierw zapisuje się początkowe położenie elementu (First), następnie pozwala mu przejść do końcowego położenia (Last), po czym odwraca się tę zmianę (Invert), stosując transformację, która wizualnie przywraca element do położenia początkowego, a na końcu odtwarza się animację (Play), usuwając transformację, aby element przeszedł do położenia końcowego.

Pozwala to animować zmiany układu za pomocą wyłącznie wydajnej właściwości transform, mimo że rzeczywisty układ zmienił się natychmiast.

Kluczowe odczyty wykonuje się w useLayoutEffect: przed zmianą zapisuje się prostokąt początkowy, po zmianie prostokąt końcowy, a następnie oblicza różnicę. Wykonanie tego przed renderowaniem gwarantuje, że transformacja odwracająca zostanie zastosowana, zanim cokolwiek zostanie wyświetlone.

Różnica między tymi dwoma prostokątami określa dokładne wartości przesunięcia i skali potrzebne do odwrócenia zmiany.

Transformację odwracającą ustawia się synchronicznie wewnątrz useLayoutEffect, a następnie w kolejnej klatce usuwa, aby element animował się do swojego naturalnego położenia. Często krok odtwarzania animacji wywołuje się za pomocą requestAnimationFrame.

Ponieważ transformacja odwracająca została zastosowana przed renderowaniem, użytkownik nigdy nie widzi elementu w jego niezmienionym położeniu końcowym.

Na serwerze nie ma DOM-u, dlatego React rejestruje ostrzeżenie informujące, że useLayoutEffect nie wykonuje żadnych działań podczas renderowania po stronie serwera. Efekty układu mają sens wyłącznie w przeglądarce.

To ostrzeżenie sygnalizuje, że efekt nie może się wykonać tam, gdzie nie ma niczego, co można zmierzyć.

Jeśli komponent musi działać na serwerze, należy użyć useEffect w połączeniu z requestAnimationFrame, aby wykonać pomiar przed następnym renderowaniem, albo warunkowo używać useLayoutEffect wyłącznie w przeglądarce.

Pozwala to uniknąć ostrzeżenia, a jednocześnie uzyskać czas wykonania zbliżony do momentu przed renderowaniem w przypadku animacji niekrytycznych.

Animowanie wysokości to klasyczny przypadek: w useLayoutEffect należy zmierzyć wysokość zwiniętego i rozwiniętego elementu, a następnie animować przejście między konkretnymi wartościami w pikselach, aby uzyskać płynny efekt.

Ponieważ wysokości auto nie można animować, wcześniejszy pomiar rzeczywistej wysokości pozwala wykonać przejście do konkretnej wartości.

W większości przypadków należy domyślnie używać useEffect. Po useLayoutEffect należy sięgać tylko wtedy, gdy odczytuje się układ i trzeba zmodyfikować DOM przed renderowaniem, aby uniknąć widocznego migotania.

Nadużywanie tego rozwiązania może pogorszyć wydajność, ponieważ blokuje renderowanie do czasu zakończenia efektu.

Dowiedział się Pan, że problem migotania wynika z wykonywania pomiaru po renderowaniu, że useLayoutEffect uruchamia się przed renderowaniem oraz jak technika FLIP animuje zmiany układu za pomocą wydajnych transformacji.

Poznał Pan również ostrzeżenie dotyczące SSR oraz rozwiązanie zastępcze oparte na useEffect i requestAnimationFrame.