Join the discussion
Comments
Loading comments...
Cookie preferences
We use essential cookies for sign-in and preferences. With your permission, we also use basic analytics to improve lessons.
Join the discussion
Loading comments...
We use essential cookies for sign-in and preferences. With your permission, we also use basic analytics to improve lessons.
Die vollständige Reise von JSX zu Pixeln — lösen Sie ein Rendering aus und beobachten Sie jede Phase.
Jedes Mal, wenn React rendert, durchläuft es eine vorhersehbare zweiphasige Pipeline: die Render-Phase und die Commit-Phase. Die Render-Phase ist rein und unterbrechbar — React ruft Ihre Komponenten auf und baut einen neuen Fiber-Baum auf. Die Commit-Phase ist synchron und hat Seiteneffekte — React wendet die berechneten Änderungen auf das echte DOM an und löst Effects aus.
Zur Build-Zeit wird JSX wie <Button color='blue'>Klick</Button> zu React.createElement(Button, '{' color: 'blue' '}', 'Klick'). Dies erzeugt einen einfachen Objektbaum — das Virtual DOM.
React durchläuft den Fiber-Baum und ruft jede Komponentenfunktion (oder render()-Methode) auf. Diese Phase ist rein und erzeugt keine Seiteneffekte — React kann sie im Concurrent Mode jederzeit unterbrechen und neu starten.
React vergleicht die neue Ausgabe mit dem vorherigen Fiber-Baum. Es markiert jeden Fiber mit einem Effect-Tag: Update, Placement (Einfügen) oder Deletion. Das Ergebnis ist eine 'Effect-Liste' — eine flache Liste von Fibers mit ausstehender Arbeit.
React ruft getSnapshotBeforeUpdate() bei Klassen-Komponenten auf und plant passive Effects. Diese Teilphase läuft, bevor DOM-Mutationen stattfinden.
React durchläuft die Effect-Liste und wendet alle DOM-Mutationen synchron an: Einfügungen, Aktualisierungen, Löschungen. Danach spiegelt das DOM die neue Benutzeroberfläche wider.
useLayoutEffect-Callbacks werden synchron nach DOM-Mutation aber vor dem Browser-Paint ausgeführt. Dann zeichnet der Browser. Schließlich werden useEffect-Callbacks asynchron nach dem Paint ausgeführt.
Reine, seiteneffektfreie Phase, in der React Komponenten aufruft und den neuen Fiber-Baum aufbaut. Kann im Concurrent Mode unterbrochen werden.
Synchrone Phase, in der React DOM-Mutationen anwendet und Lifecycle-Methoden/Effects auslöst. Kann nicht unterbrochen werden.
Wird synchron nach DOM-Mutation, vor dem Browser-Paint ausgeführt. Für DOM-Messungen verwenden. Blockiert das Zeichnen.
Wird asynchron nach dem Browser-Paint ausgeführt. Blockiert das Zeichnen nicht — ideal für Subscriptions, Fetches und nicht-visuelle Seiteneffekte.
In der Entwicklung rendert React Komponenten zweimal in der Render-Phase, um Seiteneffekte zu erkennen. Nur ein Commit findet statt.
1function MyComponent() {2 // Fires: after every render, after browser paint (async)3 useEffect(() => {4 console.log('3. useEffect — DOM painted, async');5 return () => console.log('cleanup');6 });78 // Fires: after every render, before browser paint (sync)9 useLayoutEffect(() => {10 console.log('2. useLayoutEffect — DOM mutated, not painted');11 });1213 console.log('1. Render phase — pure, no side effects');14 return <div />;15}16// Order: Render → DOM mutation → useLayoutEffect → Paint → useEffect
Das Verstehen der Pipeline hilft Ihnen, Code an die richtige Stelle zu setzen. DOM-Messungen müssen in useLayoutEffect (vor dem Paint) stehen. Datenabruf gehört in useEffect (nach dem Paint, nicht-blockierend). Initialisierung, die vor dem ersten Rendering stattfinden muss, gehört in den useState-Initialisierer oder useMemo. Fehler hierbei verursachen visuelle Blitze, Layout-Sprünge oder verpasste Renderings.
You're building a tooltip that positions itself relative to a target element. Using useEffect, the tooltip first renders at (0,0), then jumps to the correct position — causing a visible flash.
useEffect fires AFTER the browser paints. So the sequence is: Render (tooltip at 0,0) → Paint (user sees misplaced tooltip) → useEffect (measure & reposition) → Re-render → Paint (correct). The first paint shows the wrong position.
Switch to useLayoutEffect which fires AFTER DOM mutation but BEFORE paint. The sequence becomes: Render → DOM mutation → useLayoutEffect (measure & update) → Paint (correct position). The user never sees the wrong position because the browser hasn't painted yet.
Takeaway: Use useLayoutEffect for any DOM measurement or mutation that affects visual layout (tooltips, popovers, scroll position, animations). Use useEffect for everything else (data fetching, analytics, subscriptions).
You add console.log statements to debug when state changes propagate. The logs appear in an unexpected order: render logs appear before effect logs, and cleanup logs appear between them.
Without understanding the pipeline phases, developers assume effects run 'during' rendering. They place side effects in the render function body (causing bugs) or misread the log order and chase phantom timing issues.
The rendering pipeline has strict phases: Render (pure, produces VDOM) → Commit (DOM writes) → Layout Effects (sync, before paint) → Paint (browser) → Effects (async, after paint). Each console.log appears in pipeline order. Understanding this order lets you read debug output correctly and place code in the right phase.
Takeaway: The rendering pipeline is NOT a single step — it's 5 distinct phases with different timing guarantees. Most React bugs come from putting code in the wrong phase (e.g., side effects in render, DOM reads in useEffect instead of useLayoutEffect).