Unikanie przeciążenia layoutu i migotania wizualnego

Layout thrashing występuje, gdy JavaScript naprzemiennie odczytuje właściwości DOM i zapisuje dane w DOM w pętli. Każdy odczyt następujący po zapisie zmusza przeglądarkę do synchronicznego ponownego obliczenia layoutu w celu zwrócenia dokładnej wartości. Może to zmienić pojedyncze obliczenie layoutu w dziesiątki obliczeń, poważnie pogarszając wydajność.

React grupuje wszystkie wywołania setState wykonywane w obsłudze zdarzeń i efektach w jedno ponowne renderowanie. To naturalne grupowanie zapobiega wzorcowi odczyt-zapis-odczyt, który powoduje layout thrashing w ramach jednego cyklu renderowania. W React 18 grupowanie obejmuje również asynchroniczne funkcje zwrotne i obiekty Promise, ograniczając layout thrashing wynikający z równoczesnych aktualizacji stanu.

Migotanie pojawia się, gdy useEffect odczytuje DOM, aktualizuje stan, wywołuje ponowne renderowanie, a przeglądarka maluje ekran dwukrotnie: raz ze stanem początkowym i raz ze skorygowanym stanem. Pierwsze malowanie miga przez krótką chwilę, zanim zostanie zastąpione. Jest to najbardziej widoczne w przypadku efektów, które dostosowują właściwości układu, takie jak wysokość, szerokość lub położenie.

Otwórz Chrome DevTools, przejdź do karty Rendering (za pomocą menu z trzema kropkami w sekcji More tools) i włącz opcję „Paint flashing”. Obszary ponownie malowane zostaną wyróżnione na zielono. Jeśli zobaczysz, że komponent miga przy pierwszym renderowaniu, a następnie natychmiast jest ponownie malowany w innym układzie, potwierdza to podwójne malowanie spowodowane aktualizacją stanu sterowaną przez useEffect.

Przenieś odczyty DOM i wynikające z nich aktualizacje stanu z useEffect do useLayoutEffect. Ten sam pomiar i aktualizacja stanu zachodzą teraz synchronicznie przed malowaniem, React ponownie renderuje i zatwierdza zmiany w ramach tej samej fazy, a przeglądarka maluje ekran tylko raz, wyświetlając końcowy, prawidłowy stan. Zielone migotanie w DevTools znika.

Wzorzec eliminujący migotanie wygląda tak: odczytaj DOM w useLayoutEffect, wywołaj setState z wynikiem pomiaru, React synchronicznie renderuje ponownie, zatwierdza skorygowany DOM, a przeglądarka maluje ekran raz, wyświetlając końcowy rezultat. Jest to standardowy wzorzec stosowany przy pozycjonowaniu tooltipów, określaniu przesunięć przyklejonych nagłówków oraz konfiguracji animacji.

Zdecydowana większość efektów powinna znajdować się w useEffect: pobieranie danych (migotanie związane z ładowaniem jest dopuszczalne i oczekiwane), subskrypcje zdarzeń lub strumieni, rejestrowanie logów i analityka, liczniki czasu oraz każdy efekt, który nie wpływa natychmiast na widoczny układ. Nadmierne używanie useLayoutEffect tam, gdzie wystarczyłby useEffect, jest antywzorcem pogarszającym wydajność.

Należy rezerwować useLayoutEffect dla pomiarów DOM, które wpływają z powrotem na wynik wizualny: pozycji tooltipów, logiki zależnej od rozmiaru elementu, przywracania pozycji przewijania oraz konfiguracji animacji odczytującej początkowe wymiary. Wyraźnym sygnałem wskazującym na konieczność przejścia jest widoczne, trwające jedną klatkę migotanie nieprawidłowego układu przy pierwszym renderowaniu.

Sygnatury obu hooków są identyczne: useLayoutEffect(callback, deps) vs useEffect(callback, deps). Jedyna różnica dotyczy momentu wykonania funkcji zwrotnej. Można przełączać się między nimi, zmieniając w kodzie jedno słowo. Należy zacząć od useEffect i przejść na useLayoutEffect dopiero po potwierdzeniu migotania.

Używanie obu hooków w tym samym komponencie do obsługi różnych zagadnień jest prawidłowe i często stosowane. Na przykład komponent wykresu może używać useLayoutEffect, aby zmierzyć szerokość kontenera i synchronicznie ustawić viewBox SVG, a następnie używać useEffect do asynchronicznego pobierania danych wykresu. Każdy hook obsługuje ten aspekt, dla którego czas wykonania ma znaczenie.

Oprócz migotania podczas malowania w DevTools można dodać licznik w konsoli wewnątrz komponentu, aby zliczać renderowania. Jeśli komponent loguje „render” dwukrotnie przy pierwszym montowaniu — raz ze stanem początkowym i raz ze skorygowanym pomiarem — mamy do czynienia z podwójnym malowaniem. Przeniesienie pomiaru do useLayoutEffect powinno ograniczyć wynik do jednego renderowania zarejestrowanego po zamontowaniu (nie licząc podwójnego renderowania w Strict Mode).

W którym przypadku właściwym powodem użycia useLayoutEffect zamiast useEffect jest dany scenariusz?

Layout thrashing wynika z naprzemiennego odczytywania i zapisywania DOM. Grupowanie operacji przez React zapobiega większości takich przypadków podczas renderowania. Migotanie pojawia się, gdy useEffect mierzy DOM i aktualizuje stan, powodując dwa malowania. Aby usunąć migotanie, należy przenieść pomiary DOM do useLayoutEffect. W pozostałych przypadkach należy domyślnie używać useEffect: do pobierania danych, subskrypcji, rejestrowania logów i liczników czasu.