What is Layout Thrashing, and how do you avoid it in React components?

Short answer

It occurs when DOM measurements (such as offsetHeight) alternate with DOM style changes in a fast loop, forcing the browser to repeat expensive layout calculations (Reflow).

Explanation

The browser batches DOM changes and applies them together. But if you read geometric layout properties immediately after a change, the browser must stop and synchronously recalculate layout (Forced Synchronous Layout). In React, avoid this by reading all measurements first, then applying state changes in one batch.

Code example

// Bad pattern: alternating reads and writes forces repeated reflow
// elements.forEach(el => { const h = el.offsetHeight; el.style.height = (h + 10) + 'px'; });

// Good pattern: batch reads, then batch writes
const heights = elements.map(el => el.offsetHeight);
elements.forEach((el, i) => {
  el.style.height = `${heights[i] + 10}px`;
});

Common mistakes

• Continuously measuring elements in an onScroll event handler without requestAnimationFrame.

Follow-up questions

• What is Virtualization (Windowing), and how do you use TanStack Virtual to display huge lists?

Sources

• web.dev — Avoid large, complex layouts and layout thrashing