Avoiding Layout Thrash and Visual Flicker

Layout thrash occurs when JavaScript alternates between reading DOM properties and writing to the DOM in a loop. Each read after a write forces the browser to recalculate the layout synchronously to return an accurate value. This can turn what should be a single layout calculation into dozens, severely hurting performance.

React batches all setState calls within event handlers and effects into a single re-render. This natural batching prevents the read-write-read pattern that causes thrash within a single render cycle. In React 18, batching extends to async callbacks and Promises as well, reducing layout thrash from concurrent state updates.