Layout-Thrashing und visuelles Flackern vermeiden

Layout-Thrashing tritt auf, wenn JavaScript in einer Schleife abwechselnd DOM-Eigenschaften liest und in das DOM schreibt. Jeder Lesevorgang nach einem Schreibvorgang zwingt den Browser, das Layout synchron neu zu berechnen, um einen korrekten Wert zurückzugeben. Dadurch können aus einer eigentlich einzigen Layout-Berechnung Dutzende werden, was die Performance erheblich beeinträchtigt.

React bündelt alle setState-Aufrufe innerhalb von Event-Handlern und Effects zu einem einzigen erneuten Render-Vorgang. Dieses natürliche Batching verhindert das Lese-Schreib-Lese-Muster, das innerhalb eines einzelnen Render-Zyklus Thrashing verursacht. In React 18 gilt das Batching auch für asynchrone Callbacks und Promises, wodurch Layout-Thrashing durch nebenläufige Zustandsaktualisierungen reduziert wird.

Flackern tritt auf, wenn ein useEffect das DOM liest, den State aktualisiert, ein erneutes Rendern auslöst und der Browser zweimal zeichnet: einmal mit dem initialen State und einmal mit dem korrigierten State. Die erste Darstellung blitzt kurz auf, bevor sie ersetzt wird. Dies fällt besonders bei Effects auf, die Layout-Eigenschaften wie Höhe, Breite oder Position anpassen.

Öffnen Sie die Chrome DevTools, wechseln Sie zum Tab Rendering (über das Dreipunktmenü unter Weitere Tools) und aktivieren Sie „Paint flashing“. Bereiche, die neu gezeichnet werden, werden grün hervorgehoben. Wenn eine Komponente beim ersten Rendern aufblitzt und anschließend sofort mit einem anderen Layout erneut gezeichnet wird, bestätigt dies einen Double-Paint durch ein von useEffect ausgelöstes State-Update.

Verschieben Sie DOM-Lesevorgänge und die daraus resultierenden State-Updates von useEffect nach useLayoutEffect. Dieselbe Messung und das State-Update erfolgen nun synchron vor dem Paint, React rendert neu und committet im selben Block, und der Browser zeichnet nur den finalen, korrekten State. Das grüne Flackern in den DevTools verschwindet.

Das Muster ohne Flackern lautet: Lesen Sie das DOM in useLayoutEffect, rufen Sie setState mit der Messung auf, React rendert synchron neu, committet das korrigierte DOM und der Browser zeichnet einmal mit dem finalen Ergebnis. Dies ist das Standardmuster für die Positionierung von Tooltips, Offsets von Sticky Headers und die Einrichtung von Animationen.

Der überwiegende Teil der Effects gehört in useEffect: Datenabrufe (das Flackern beim Laden ist akzeptabel und erwartbar), Abonnements von Events oder Streams, Logging und Analytics, Timer sowie alle Effects, die das sichtbare Layout nicht unmittelbar beeinflussen. Eine übermäßige Verwendung von useLayoutEffect, obwohl useEffect ausreichen würde, ist ein Anti-Pattern und beeinträchtigt die Performance.

Reservieren Sie useLayoutEffect für DOM-Messungen, die in die visuelle Ausgabe zurückfließen: Tooltip-Positionen, Logik auf Grundlage der Elementgröße, die Wiederherstellung der Scroll-Position und die Einrichtung von Animationen, bei der anfängliche Abmessungen gelesen werden. Ein eindeutiges Anzeichen für einen Wechsel ist ein sichtbares, einen Frame langes Aufblitzen eines falschen Layouts beim ersten Rendern.

Die beiden Hooks haben identische Signaturen: useLayoutEffect(callback, deps) und useEffect(callback, deps). Der einzige Unterschied besteht im Zeitpunkt, zu dem der Callback ausgeführt wird. Sie können zwischen ihnen mit einer Änderung um ein Wort im Code wechseln. Beginnen Sie mit useEffect und wechseln Sie nur dann zu useLayoutEffect, wenn Sie Flackern bestätigen.

Es ist zulässig und üblich, beide Hooks in derselben Komponente für unterschiedliche Belange zu verwenden. Beispielsweise könnte eine Chart-Komponente useLayoutEffect verwenden, um ihre Containerbreite zu messen und die SVG viewBox synchron zu setzen, und anschließend useEffect einsetzen, um die Chartdaten asynchron abzurufen. Jeder Hook übernimmt den Bereich, bei dem der Zeitpunkt entscheidend ist.

Neben dem Paint-Flashing in den DevTools können Sie innerhalb Ihrer Komponente einen Konsolenzähler hinzufügen, um Render-Vorgänge zu zählen. Wenn eine Komponente beim ersten Mount zweimal „render“ protokolliert – einmal mit dem initialen State und einmal mit der korrigierten Messung –, liegt ein Double-Paint-Szenario vor. Wenn Sie die Messung nach useLayoutEffect verschieben, sollte nach dem Mount nur noch ein protokolliertes Rendern übrig bleiben (abgesehen vom doppelten Rendern im Strict Mode).

Welches Szenario ist der richtige Grund, useLayoutEffect statt useEffect zu verwenden?

Layout Thrashing entsteht durch das abwechselnde Lesen und Schreiben des DOM. Das Batching von React verhindert den größten Teil davon innerhalb von Render-Vorgängen. Flackern tritt auf, wenn useEffect das DOM misst und den State aktualisiert, wodurch zwei Paints entstehen. Beheben Sie Flackern, indem Sie DOM-Messungen nach useLayoutEffect verschieben. Verwenden Sie standardmäßig useEffect für alles andere: Datenabrufe, Abonnements, Logging und Timer.