useLayoutEffect für Messungen vor Animationen

Manchmal springt oder flackert ein Element beim ersten Rendern sichtbar, bevor es seine endgültige Position einnimmt. Das geschieht normalerweise, wenn Sie ein Element messen oder neu positionieren, nachdem der Browser es bereits gezeichnet hat.

Der Nutzer sieht eine Frame lang die falsche Position und anschließend eine plötzliche Korrektur, wodurch die Oberfläche fehlerhaft wirkt.

useEffect wird ausgeführt, nachdem der Browser gezeichnet hat. Wenn Sie also in useEffect eine Messung auslesen und das DOM aktualisieren, hat der Nutzer den nicht korrigierten Frame bereits gesehen, bevor Ihre Änderung greift.

Für eine visuelle Positionierung, die für den Nutzer unsichtbar bleiben muss, kommt der Zeitpunkt nach dem Zeichnen zu spät.

useLayoutEffect wird synchron ausgeführt, nachdem React das DOM verändert hat, aber bevor der Browser zeichnet. Jede DOM-Lese- oder Schreiboperation, die Sie dort ausführen, wird angewendet, bevor der Nutzer auch nur einen Frame sieht.

Damit ist dieser Hook das richtige Werkzeug für Messungen und Positionierungen, die sofort korrekt erscheinen müssen.

Innerhalb von useLayoutEffect können Sie mit ref.current.getBoundingClientRect() das Layout eines Elements auslesen, um seine Position und Größe vor der Animation zu erfassen.

Da dies vor dem Zeichnen geschieht, können Sie sowohl messen als auch eine Ausgangstransformation anwenden, ohne dass ein sichtbarer Flash entsteht.

FLIP steht für First, Last, Invert, Play. Sie erfassen zunächst die First-Position des Elements, lassen es sich an seine Last-Position bewegen, invertieren die Bewegung anschließend, indem Sie eine Transformation anwenden, die es visuell wieder an die First-Position setzt, und starten schließlich die Wiedergabe, indem Sie die Transformation entfernen, sodass es zur Last-Position animiert.

So können Sie Layoutänderungen ausschließlich mit der kostengünstigen Eigenschaft transform animieren, obwohl sich das tatsächliche Layout sofort verändert hat.

Die entscheidenden Messungen erfolgen in useLayoutEffect: Erfassen Sie das First-Rechteck vor der Änderung und das Last-Rechteck danach und berechnen Sie anschließend die Differenz. Da dies vor dem Zeichnen geschieht, ist die invertierende Transformation garantiert angewendet, bevor etwas angezeigt wird.

Die Differenz zwischen den beiden Rechtecken liefert Ihnen die exakte Verschiebung und Skalierung für die Invertierung.

Sie setzen die invertierende Transformation synchron in useLayoutEffect und entfernen sie im nächsten Frame, sodass das Element an seine natürliche Position animiert. Häufig lösen Sie diesen Wiedergabeschritt mit requestAnimationFrame aus.

Da die Invertierung vor dem Zeichnen angewendet wurde, sieht der Nutzer das Element nie an seiner unveränderten Last-Position.

Auf dem Server gibt es kein DOM. Daher protokolliert React eine Warnung, dass useLayoutEffect während des serverseitigen Renderns keine Wirkung hat. Layout-Effekte sind nur im Browser sinnvoll.

Diese Warnung weist darauf hin, dass der Effekt dort nicht ausgeführt werden kann, wo es nichts zu messen gibt.

Wenn eine Komponente auf dem Server ausgeführt werden muss, verwenden Sie useEffect zusammen mit requestAnimationFrame, um die Messung vor dem nächsten Zeichnen durchzuführen, oder verwenden Sie useLayoutEffect nur bedingt im Browser.

So vermeiden Sie die Warnung und erreichen bei nicht kritischen Animationen dennoch einen Zeitpunkt nahe am Zeichnen.

Eine Höhenanimation ist ein klassischer Anwendungsfall: Messen Sie die eingeklappte und die ausgeklappte Höhe in useLayoutEffect und animieren Sie anschließend zwischen konkreten Pixelwerten, damit die Transition flüssig verläuft.

Da die Höhe auto nicht animierbar ist, können Sie durch vorheriges Messen der tatsächlichen Höhe zu einer konkreten Zahl übergehen.

Verwenden Sie standardmäßig useEffect für die meisten Aufgaben. Setzen Sie useLayoutEffect nur ein, wenn Sie das Layout auslesen und das DOM vor dem Zeichnen verändern müssen, um einen sichtbaren Flash zu vermeiden.

Eine übermäßige Verwendung kann die Leistung beeinträchtigen, da das Zeichnen blockiert wird, bis der Hook abgeschlossen ist.

Testen Sie Ihr Verständnis des Zeitpunkts von Effekten.

Sie haben gelernt, dass das Flash-Problem durch Messungen nach dem Zeichnen entsteht, dass useLayoutEffect vor dem Zeichnen ausgeführt wird und wie die FLIP-Technik Layoutänderungen mit kostengünstigen Transformationen animiert.

Außerdem haben Sie den SSR-Hinweis sowie eine Ausweichlösung mit useEffect und requestAnimationFrame kennengelernt.