Kiedy uruchamia się useLayoutEffect, a kiedy useEffect

useLayoutEffect jest uruchamiany synchronicznie natychmiast po zastosowaniu przez Reacta mutacji DOM, ale zanim przeglądarka zdąży namalować te zmiany. Z perspektywy przeglądarki efekt layoutu i mutacje DOM są częścią tego samego, nieprzerwanego, synchronicznego bloku pracy.

useEffect jest uruchamiany asynchronicznie po zakończeniu malowania przez przeglądarkę. Użytkownik najpierw widzi zaktualizowany interfejs, a dopiero potem uruchamiany jest efekt. Dzięki temu useEffect w mniejszym stopniu zakłóca wydajność renderowania, ale wszelkie widoczne zmiany spowodowane przez efekt skutkują kolejnym cyklem malowania.

Różnicę w czasie można zweryfikować, zapisując znaczniki czasu w obu efektach: dodaj console.log('layout', Date.now()) w useLayoutEffect oraz console.log('passive', Date.now()) w useEffect. W konsoli znacznik czasu efektu layoutu będzie zawsze wcześniejszy niż znacznik czasu efektu pasywnego, co potwierdzi kolejność wykonywania.

Jeśli useEffect aktualizuje stan wpływający na wygląd interfejsu, użytkownik widzi dwa renderowania: początkowe renderowanie z nieaktualnym stanem, a następnie poprawione renderowanie po uruchomieniu efektu. Objawia się to widocznym mignięciem lub ponownym ułożeniem elementów. useLayoutEffect zapobiega temu, ponieważ jego aktualizacje stanu są zatwierdzane, zanim przeglądarka cokolwiek namaluje.

Jeśli wywołasz setState wewnątrz useLayoutEffect, React natychmiast uruchomi kolejny cykl renderowania i commitowania przed malowaniem. Przeglądarka namaluje tylko końcowy wynik — użytkownik nigdy nie zobaczy stanu pośredniego. To główny przypadek użycia useLayoutEffect: zmierzyć DOM, obliczyć nową wartość, ustawić stan i zagwarantować jedno poprawne malowanie.

Ponieważ useLayoutEffect działa synchronicznie przed malowaniem i może wywoływać dodatkowe renderowania, jego nadmierne używanie może pogorszyć wydajność. Jeśli praca synchroniczna jest intensywna, blokuje przeglądarkę przed malowaniem, powodując widoczne zacinanie. Używaj go tylko wtedy, gdy trzeba zapobiec widocznemu mignięciu; we wszystkich pozostałych przypadkach używaj useEffect.

W React Strict Mode (tylko w środowisku deweloperskim) zarówno useLayoutEffect, jak i useEffect są wywoływane dwukrotnie przy każdym montowaniu. Sekwencja wygląda tak: montowanie, czyszczenie, ponowne montowanie. Pomaga to wykrywać efekty, które nie są prawidłowo czyszczone. Podwójne wywołanie nie występuje w kompilacjach produkcyjnych.

Domyślnym wyborem powinien być zawsze useEffect. Przełącz się na useLayoutEffect tylko wtedy, gdy możesz zaobserwować i odtworzyć problem z widocznym migotaniem lub nieprawidłowym układem. Nadużywanie useLayoutEffect niepotrzebnie blokuje potok malowania przeglądarki i może pogorszyć postrzeganą wydajność.

useLayoutEffect nie może działać na serwerze, ponieważ w środowisku serwerowym nie ma DOM ani cyklu malowania przeglądarki. Jeśli użyjesz go w komponencie renderowanym na serwerze, React wyświetli ostrzeżenie. Rozwiązaniem jest warunkowe pominięcie efektu: sprawdź typeof window !== 'undefined' albo przełącz się na useEffect w kodzie zgodnym z SSR.

Zadaj sobie pytanie: „Czy ten efekt zmienia coś, co użytkownik zobaczy już podczas pierwszego malowania?” Jeśli tak, użyj useLayoutEffect, aby zapobiec mignięciu. Jeśli nie — na przykład w przypadku pobierania danych, subskrypcji, analityki, rejestrowania i większości innych efektów ubocznych — użyj useEffect. Te zasady pozwalają rozstrzygnąć większość przypadków spotykanych w praktyce.

useLayoutEffect działa w tym samym synchronicznym bloku co mutacje DOM. React nie może przetwarzać innej pracy, takiej jak reagowanie na zdarzenia użytkownika, gdy działa useLayoutEffect. Dlatego efekt ten musi być szybki i skoncentrowany na jednym zadaniu. Długi kod synchroniczny w useLayoutEffect bezpośrednio opóźnia wyświetlenie obrazu przez przeglądarkę.

Dokładnie kiedy useLayoutEffect jest uruchamiany w odniesieniu do mutacji DOM i malowania przez przeglądarkę?

useLayoutEffect działa synchronicznie i jest uruchamiany przed malowaniem przez przeglądarkę, dzięki czemu nadaje się do mierzenia DOM i korygowania wyglądu. useEffect jest uruchamiany po malowaniu i jest właściwym wyborem do pobierania danych, subskrypcji i większości efektów ubocznych. Domyślnie używaj useEffect, a przełączaj się na useLayoutEffect tylko wtedy, gdy migotanie wskazuje, że jest on potrzebny. Unikaj używania go w SSR bez odpowiednich zabezpieczeń.