DOM-Elemente mit useLayoutEffect messen

element.getBoundingClientRect() gibt ein DOMRect-Objekt mit der Größe und Position des Elements relativ zum Viewport zurück: top, right, bottom, left, width und height. Dafür muss der Browser eine Layout-Berechnung durchführen, rufen Sie die Methode daher sparsam auf.

Wenn Sie getBoundingClientRect() in einem useEffect lesen, hat der Browser bereits gepaintet. Wenn Sie den Zustand anschließend auf Grundlage der Messung setzen, rendert React erneut und der Browser paintet nochmals. Benutzer sehen das Element möglicherweise kurz an der falschen Position oder mit der falschen Größe, bevor die Korrektur im zweiten Paint erscheint.

Das Lesen von Messwerten in useLayoutEffect erfolgt nach den DOM-Mutationen, aber vor dem Paint. Jede durch die Messung ausgelöste Zustandsaktualisierung veranlasst React, synchron erneut zu rendern und das korrigierte DOM zu committen – und zwar bevor der Browser irgendetwas gepaintet hat. Benutzer sehen in einem einzigen Paint-Zyklus nur das endgültige, korrekte Ergebnis.

Ein Tooltip muss in der Nähe seines auslösenden Elements erscheinen. Messen Sie die Position des auslösenden Elements in useLayoutEffect mit getBoundingClientRect(), berechnen Sie die absolute Position des Tooltips und speichern Sie diese Position im Zustand. Der Tooltip wird bereits beim allerersten Paint an der richtigen Stelle gerendert, ohne sichtbares Springen von einer falschen Ausgangsposition.

Um ein Element von seiner natürlichen (uneingeschränkten) Größe auf eine feste Größe zu animieren, müssen Sie die natürliche Größe kennen, bevor Sie die Einschränkung anwenden. Lesen Sie die Höhe des Elements in useLayoutEffect, bevor ein Animationsstil angewendet wird, speichern Sie sie im Zustand und verwenden Sie sie anschließend als Startwert des Keyframes für Ihre CSS-Transition.

Wenn eine Seite einen Sticky-Header hat, benötigt der Inhaltsbereich ein oberes Padding in Höhe des Headers, damit er nicht dahinter verborgen wird. Messen Sie die Höhe des Headers in useLayoutEffect mithilfe einer Ref: headerRef.current.getBoundingClientRect().height. Setzen Sie diesen Wert als paddingTop für den Inhaltscontainer. Das Layout ist bereits beim ersten Render-Vorgang korrekt.

Wenn Sie setState innerhalb von useLayoutEffect aufrufen, führt React im selben synchronen Arbeitsblock sofort einen weiteren Render- und Commit-Zyklus aus. Bei diesem erneuten Render-Vorgang wird auch der useLayoutEffect erneut ausgeführt. Achten Sie darauf, keine Endlosschleife zu erzeugen: Aktualisieren Sie den Zustand nur, wenn sich der neue Messwert vom aktuellen Zustandswert unterscheidet.

Auf dem Server existieren DOM-Elemente nicht, daher würde getBoundingClientRect() einen Fehler auslösen oder Nullen zurückgeben. Sichern Sie Ihren useLayoutEffect mit einer Prüfung ab: if (typeof window === 'undefined') return;. Bei SSR-Anwendungen müssen Sie möglicherweise mit einer Platzhaltergröße hydratisieren und die Messung nach der Hydration auf dem Client durchführen.

Eine einmalige Messung mit useLayoutEffect liefert die Größe zum Zeitpunkt des Mountens. Um Größenänderungen zu verfolgen, während sich das Element verändert (durch eine Größenänderung des Fensters, dynamische Inhalte oder CSS-Änderungen), verwenden Sie stattdessen ResizeObserver. Er ruft eine Callback-Funktion auf, sobald sich die Größe des Elements ändert, und eignet sich daher besser für responsive Komponenten.

Wenn mehrere Effects dieselbe Messung benötigen, berechnen Sie sie einmal und teilen Sie sie über Context oder durch Weitergabe als Props. Wenn derselbe Wert von getBoundingClientRect() in mehreren useLayoutEffect-Aufrufen berechnet wird, löst dies mehrere synchrone Layout-Lesevorgänge aus, von denen jeder relativ aufwendig ist. Fassen Sie Messungen nach Möglichkeit zusammen.

Refs werden befüllt, bevor Effects ausgeführt werden. Wenn useLayoutEffect ausgeführt wird, zeigt ref.current garantiert auf das DOM-Element. Deshalb funktioniert dieses Muster: useLayoutEffect(() => { const rect = ref.current.getBoundingClientRect(); ... }, []). Bei einer gemounteten Komponente ist die Ref innerhalb eines Layout-Effects niemals null.

Warum ist es besser, getBoundingClientRect() in useLayoutEffect statt in useEffect aufzurufen?

Verwenden Sie getBoundingClientRect() in useLayoutEffect, um DOM-Messwerte nach den Mutationen, aber vor dem Paint zu lesen. Zustandsaktualisierungen aufgrund dieser Messungen führen zu einem synchronen erneuten Render-Vorgang, der in denselben Paint einbezogen wird und Flackern verhindert. Sichern Sie SSR mit einer typeof window-Prüfung ab. Für die fortlaufende Größenüberwachung sollten Sie ResizeObserver bevorzugen.