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.
Wie React mehrere setState-Aufrufe zu einem einzigen Re-Render zusammenfasst.
State-Batching bedeutet, dass React mehrere setState-Aufrufe aus demselben synchronen Block sammelt und sie alle in einem einzigen Re-Rendering-Durchlauf verarbeitet. Anstatt nach jedem einzelnen setState-Aufruf neu zu rendern, wartet React bis zum Ende des aktuellen 'Batch', wendet alle Updates auf einmal an und rendert genau einmal. React 18 hat automatisches Batching auf asynchronen Code und native Event-Listener ausgeweitet.
Wenn Sie setA(1) und setB(2) in einem Click-Handler aufrufen, rendert React nicht sofort nach setA neu. Es stellt beide Updates in die Warteschlange und plant ein einziges Re-Rendering ein. Ihre Komponente rendert einmal mit beiden neuen Werten.
Jeder setState-Aufruf hängt ein Update-Objekt an die zirkuläre Queue des Hooks an. React markiert den Fiber als ausstehende Arbeit und plant eine Microtask (oder einen Callback) zum Leeren der Queue — aber erst nach Abschluss des aktuellen synchronen Codes.
In React 17 fand Batching nur innerhalb von React-Event-Handlern statt. setState-Aufrufe in setTimeout, Promises oder fetch-Callbacks lösten individuelle Re-Renderings aus. React 18 bündelt ALLE Updates automatisch, unabhängig von ihrer Herkunft.
Wenn Sie eine synchrone DOM-Aktualisierung benötigen (z.B. um das Layout nach einer Zustandsänderung zu messen), rufen Sie ReactDOM.flushSync(() => setState(...)) auf. Dies zwingt React, das Update sofort und synchron zu leeren und dabei Batching zu umgehen.
Wenn mehrere setState-Aufrufe vom vorherigen Wert abhängen, verwenden Sie die funktionale Form: setState(prev => prev + 1). React wendet diese Updates in Warteschlangenreihenfolge an, sodass jedes Update das Ergebnis des vorherigen sieht — nicht den Wert zum Render-Zeitpunkt.
React 18-Feature: alle setState-Aufrufe werden zusammengefasst, auch in setTimeout, Promises und nativen Event-Listenern. Reduziert unnötige Re-Renderings.
Eine zirkuläre verkettete Liste auf jedem Hook-Objekt, die ausstehende setState-Aufrufe speichert. Am Ende jedes Batches geleert — alle Updates in Reihenfolge angewendet.
Zwingt React, ausstehende Zustandsaktualisierungen synchron und sofort zu leeren. Umgeht Batching. Nur verwenden, wenn nach einer Zustandsänderung eine DOM-Messung benötigt wird.
setState(prev => neuerWert). Garantiert den neuesten Zustandswert zu erhalten, auch wenn Updates gebündelt oder asynchron eingereiht werden.
Batching reduziert die Anzahl der Renderings. Ohne Batching: N setState-Aufrufe = N Renderings. Mit Batching: N setState-Aufrufe = 1 Rendering.
1// React 18: ALL of these batch into 1 render23// Inside event handler (always batched)4function handleClick() {5 setCount(c => c + 1); // queued6 setFlag(true); // queued7 setName('Alice'); // queued8 // 1 render happens here9}1011// Inside setTimeout — NOW also batched in React 1812setTimeout(() => {13 setCount(c => c + 1); // queued14 setFlag(true); // queued15 // 1 render (React 17 would have triggered 2!)16}, 0);1718// Opt out of batching when needed:19import { flushSync } from 'react-dom';20flushSync(() => setCount(1)); // renders immediately21flushSync(() => setFlag(true)); // renders again22// 2 renders total
Batching ist eine der wichtigsten Leistungsoptimierungen von React. Ohne Batching würde eine einzelne Benutzerinteraktion, die 3 Zustandsaktualisierungen auslöst, 3 vollständige Render-+Reconcile-+Commit-Zyklen verursachen. Mit Batching ist es immer nur 1. Reacts automatisches Batching in React 18 ist besonders wertvoll für asynchronen Code — Server-Antworten, WebSocket-Nachrichten und Timer belasten den Renderer nicht mehr übermäßig.
A login form validates email, password, and shows/hides error messages. The submit handler calls `setEmailError(...)`, `setPasswordError(...)`, `setIsSubmitting(false)` — three state updates that should be a single render.
In React 17, calling setState inside setTimeout or fetch().then() didn't batch — each call triggered a separate render. Users would see a flash: first the email error appears, then the password error, then the loading spinner disappears. Three renders for one validation check.
React 18's automatic batching ensures all three setState calls result in ONE render, regardless of whether they're inside an event handler, setTimeout, fetch callback, or promise. The user sees all errors and the stopped spinner simultaneously — no flash.
Takeaway: React 18's automatic batching is a free performance upgrade for existing code. If you migrated from React 17 and had flushSync workarounds for batching, you can now remove them — batching works everywhere automatically.
You need to update a component's state and immediately measure the resulting DOM height to pass to a third-party animation library. With batching, the DOM hasn't updated yet when you try to measure.
Automatic batching defers the DOM update. After calling `setExpanded(true)`, the DOM still shows the collapsed state. Measuring `element.offsetHeight` returns the old height. The animation library receives the wrong value.
Wrap the state update in `flushSync()`: `flushSync(() => setExpanded(true))`. This forces React to immediately commit the DOM update synchronously. The next line can safely measure `element.offsetHeight` and get the expanded height. Use sparingly — it opts out of batching's performance benefit.
Takeaway: flushSync is the escape hatch when you need synchronous DOM access after a state update. Common use cases: third-party animation libraries, scroll position restoration, and focus management. Use it only when batching conflicts with imperative DOM operations.