Wann useLayoutEffect im Vergleich zu useEffect ausgeführt wird

useLayoutEffect wird synchron unmittelbar ausgeführt, nachdem React die DOM-Mutationen angewendet hat, aber bevor der Browser Gelegenheit hatte, diese Änderungen zu painten. Aus Sicht des Browsers gehören der Layout-Effect und die DOM-Mutationen zum selben ununterbrochenen synchronen Arbeitsblock.

useEffect wird asynchron ausgeführt, nachdem der Browser seinen Paint abgeschlossen hat. Die Benutzer sehen zuerst die aktualisierte Oberfläche, danach wird der Effect ausgeführt. Dadurch beeinträchtigt useEffect die Rendering-Performance weniger, sichtbare Änderungen durch den Effect führen jedoch zu einem zweiten Paint-Zyklus.

Sie können den Timing-Unterschied überprüfen, indem Sie in beiden Effects Zeitstempel protokollieren: Fügen Sie console.log('layout', Date.now()) in useLayoutEffect und console.log('passive', Date.now()) in useEffect ein. In der Konsole ist der Zeitstempel des Layout-Effects immer früher als der des passiven Effects. Dadurch wird die Ausführungsreihenfolge bestätigt.

Wenn ein useEffect den Zustand aktualisiert, der die visuelle Ausgabe beeinflusst, sehen Benutzer zwei Render-Vorgänge: den initialen Render-Vorgang mit veraltetem Zustand und anschließend den korrigierten Render-Vorgang nach der Ausführung des Effects. Dies zeigt sich als sichtbares Aufblitzen oder Reflow. useLayoutEffect verhindert dies, da seine Zustandsaktualisierungen vor dem Paint des Browsers committed werden.

Wenn Sie setState innerhalb eines useLayoutEffect aufrufen, führt React vor dem Paint sofort einen weiteren Render- und Commit-Zyklus aus. Der Browser paintet nur das endgültige Ergebnis – die Benutzer sehen den Zwischenzustand nie. Dies ist der wichtigste Anwendungsfall für useLayoutEffect: das DOM messen, einen neuen Wert berechnen, den Zustand setzen und so einen einzigen sauberen Paint garantieren.

Da useLayoutEffect synchron vor dem Paint ausgeführt wird und zusätzliche Render-Vorgänge auslösen kann, kann eine übermäßige Verwendung die Performance beeinträchtigen. Wenn die synchrone Arbeit umfangreich ist, hindert sie den Browser am Painten und verursacht sichtbares Ruckeln. Verwenden Sie den Effect nur, wenn Sie ein visuelles Aufblitzen verhindern müssen; verwenden Sie in allen anderen Fällen useEffect.

Im React Strict Mode (nur in der Entwicklung) werden sowohl useLayoutEffect als auch useEffect pro Mount zweimal aufgerufen. Die Reihenfolge lautet: mounten, bereinigen, erneut mounten. Dadurch lassen sich Effects erkennen, die nicht ordnungsgemäß bereinigt werden. Der doppelte Aufruf findet in Produktions-Builds nicht statt.

Die Standardwahl sollte immer useEffect sein. Wechseln Sie nur dann zu useLayoutEffect, wenn Sie ein visuelles Flackern oder ein fehlerhaftes Layout beobachten und reproduzieren können. Eine übermäßige Verwendung von useLayoutEffect blockiert die Paint-Pipeline des Browsers unnötig und kann die wahrgenommene Performance verschlechtern.

useLayoutEffect kann auf dem Server nicht ausgeführt werden, da es in einer Serverumgebung weder ein DOM noch einen Paint-Zyklus des Browsers gibt. Wenn der Effect in einer Komponente verwendet wird, die auf dem Server gerendert wird, gibt React eine Warnung aus. Die Lösung besteht darin, den Effect bedingt zu überspringen: Prüfen Sie typeof window !== 'undefined' oder wechseln Sie für SSR-kompatiblen Code zu useEffect.

Fragen Sie sich: „Ändert dieser Effect etwas, das Benutzer bereits beim allerersten Paint sehen werden?“ Wenn ja, verwenden Sie useLayoutEffect, um ein Aufblitzen zu verhindern. Wenn nein – etwa beim Abrufen von Daten, bei Subscriptions, Analytics, Logging und den meisten anderen Seiteneffekten –, verwenden Sie useEffect. Dieser Entscheidungsrahmen deckt die meisten Fälle aus der Praxis ab.

useLayoutEffect wird im selben synchronen Arbeitsblock wie die DOM-Mutationen ausgeführt. React kann keine andere Arbeit verarbeiten, etwa auf Benutzereingaben reagieren, während ein useLayoutEffect ausgeführt wird. Deshalb muss der Effect schnell und fokussiert sein. Lang andauernder synchroner Code in useLayoutEffect verzögert direkt das Rendern des Browsers auf dem Bildschirm.

Wann genau wird useLayoutEffect relativ zu DOM-Mutationen und dem Paint des Browsers ausgeführt?

useLayoutEffect ist synchron und wird vor dem Paint des Browsers ausgeführt. Dadurch eignet er sich zum Messen des DOMs und für visuelle Korrekturen. useEffect wird nach dem Paint ausgeführt und ist die richtige Wahl für das Abrufen von Daten, Subscriptions und die meisten Seiteneffekte. Verwenden Sie standardmäßig useEffect und wechseln Sie nur dann zu useLayoutEffect, wenn visuelles Flackern bestätigt, dass er benötigt wird. Vermeiden Sie ihn bei SSR ohne entsprechende Schutzvorkehrungen.