Pomiar elementów DOM za pomocą useLayoutEffect

element.getBoundingClientRect() zwraca obiekt DOMRect zawierający rozmiar i położenie elementu względem obszaru widoku: top, right, bottom, left, width i height. Aby zwrócić dokładne wartości, wymusza wykonanie obliczeń layoutu przez przeglądarkę, dlatego wywołuj go oszczędnie.

Jeśli odczytasz getBoundingClientRect() w useEffect, przeglądarka zdążyła już wykonać malowanie. Jeśli następnie ustawisz stan na podstawie pomiaru, React ponownie wyrenderuje komponent, a przeglądarka wykona kolejne malowanie. Użytkownik może przez chwilę widzieć element w niewłaściwym położeniu lub rozmiarze, zanim korekta pojawi się podczas drugiego malowania.

Odczyt pomiarów w useLayoutEffect odbywa się po mutacjach DOM, ale przed malowaniem. Każda aktualizacja stanu wywołana przez pomiar powoduje synchroniczne ponowne renderowanie i zatwierdzenie poprawionego DOM przez React — wszystko to przed namalowaniem czegokolwiek przez przeglądarkę. Użytkownik widzi tylko końcowy, prawidłowy wynik w jednym cyklu malowania.

Dymek powinien pojawić się w pobliżu elementu, który go wywołał. Zmierz położenie tego elementu w useLayoutEffect za pomocą getBoundingClientRect(), oblicz bezwzględne położenie dymka i zapisz je w stanie. Dymek zostanie wyrenderowany we właściwym miejscu już podczas pierwszego malowania, bez widocznego przeskoku z nieprawidłowego położenia początkowego.

Aby animować element od jego naturalnego (nieograniczonego) rozmiaru do stałego rozmiaru, trzeba znać jego naturalny rozmiar przed zastosowaniem ograniczenia. Odczytaj wysokość elementu w useLayoutEffect, zanim zostanie zastosowany jakikolwiek styl animacji, zapisz ją w stanie, a następnie użyj jej jako początkowej wartości klatki kluczowej przejścia CSS.

Gdy strona ma przyklejony nagłówek, treść powinna mieć górny padding równy wysokości nagłówka, aby nie była za nim ukryta. Zmierz wysokość nagłówka w useLayoutEffect za pomocą ref: headerRef.current.getBoundingClientRect().height. Ustaw tę wartość jako paddingTop kontenera treści. Układ będzie prawidłowy już podczas pierwszego renderowania.

Gdy wywołasz setState wewnątrz useLayoutEffect, React natychmiast uruchomi kolejny cykl renderowania i commitowania w tym samym synchronicznym bloku. To ponowne renderowanie również uruchomi useLayoutEffect. Uważaj, aby nie utworzyć nieskończonej pętli: aktualizuj stan tylko wtedy, gdy nowy pomiar różni się od bieżącej wartości stanu.

Na serwerze elementy DOM nie istnieją, więc getBoundingClientRect() może zgłosić wyjątek lub zwrócić zera. Zabezpiecz useLayoutEffect za pomocą sprawdzenia: if (typeof window === 'undefined') return;. W aplikacjach SSR może być konieczne nawodnienie z użyciem zastępczego rozmiaru, a następnie wykonanie pomiaru po nawodnieniu po stronie klienta.

Jednorazowy pomiar za pomocą useLayoutEffect zapewnia rozmiar w momencie montowania. Do śledzenia zmian rozmiaru podczas zmieniania rozmiaru elementu, na przykład w wyniku zmiany rozmiaru okna, dynamicznej treści lub zmian CSS, użyj zamiast tego ResizeObserver. Wywołuje on funkcję zwrotną za każdym razem, gdy rozmiar elementu się zmieni, dzięki czemu lepiej nadaje się do responsywnych komponentów.

Jeśli kilka efektów potrzebuje tego samego pomiaru, oblicz go raz i udostępnij za pomocą kontekstu albo przekaż jako props. Obliczanie tej samej wartości getBoundingClientRect() w wielu wywołaniach useLayoutEffect powoduje wiele synchronicznych odczytów layoutu, z których każdy jest stosunkowo kosztowny. W miarę możliwości łącz pomiary.

Ref są uzupełniane przed uruchomieniem efektów. Gdy uruchamiany jest useLayoutEffect, masz gwarancję, że ref.current wskazuje element DOM. Dlatego ten schemat działa: useLayoutEffect(() => { const rect = ref.current.getBoundingClientRect(); ... }, []). W efekcie layoutu zamontowanego komponentu ref nigdy nie ma wartości null.

Dlaczego lepiej wywoływać getBoundingClientRect() w useLayoutEffect niż w useEffect?

Używaj getBoundingClientRect() w useLayoutEffect, aby odczytywać pomiary DOM po mutacjach, ale przed malowaniem. Aktualizacje stanu wynikające z tych pomiarów powodują synchroniczne ponowne renderowanie uwzględniane w tym samym malowaniu, co zapobiega migotaniu. Zabezpiecz kod przed SSR za pomocą sprawdzenia typeof window. Do ciągłego śledzenia zmian rozmiaru wybieraj ResizeObserver.