javascript / intermediate
Snippet
Automatisches Batching in React 18
Vor React 18 wurden State-Updates nur innerhalb von React-Event-Handlern gebündelt. Jetzt werden Updates auch innerhalb von Promises, Timeouts oder nativen Event-Handlern automatisch zusammengefasst. Dies reduziert die Anzahl der Re-Renders erheblich und verbessert die Performance.
snippet.js
javascript
1
2
3
4
5
setTimeout(() => {setCount(c => c + 1);setFlag(f => !f);// In React 18, this results in only one re-render}, 1000);
react
Erklärung
1
setTimeout(() => {
Eine asynchrone Timeout-Funktion, in der das Batching in älteren Versionen fehlschlug.
2
setCount(c => c + 1);
Erstes State-Update, das für den nächsten Render-Zyklus eingereiht wird.
3
setFlag(f => !f);
Zweites State-Update; React 18 kombiniert dies mit dem vorherigen Aufruf in einem einzigen Render-Vorgang.