Explain layout thrashing and the browser rendering pipeline

Interview framing: This question checks whether you can reason below React when UI feels janky. React is not the whole rendering pipeline.

Browser pipeline:

1. Parse HTML and CSS into DOM/CSSOM.
2. Build the render tree.
3. Calculate layout: element sizes and positions.
4. Paint pixels.
5. Composite layers to the screen.

Layout thrashing:

• Happens when JavaScript alternates DOM writes and layout reads.
• Reads like offsetHeight, getBoundingClientRect, or computed styles can force layout.
• If this repeats in a loop, the browser recalculates layout many times.

Example problem:

• Write a row height.
• Read another row's bounding box.
• Write again.
• Repeat for hundreds of rows.

Prevention:

• Batch DOM reads before writes.
• Prefer CSS transforms and opacity for animations.
• Avoid measuring layout in large loops.
• Use requestAnimationFrame for coordinated visual updates.
• Be careful with useLayoutEffect because it runs before paint and can block rendering.
• Virtualize large tables/lists.

Debugging:

• Use Chrome Performance panel to look for long layout/recalculate style tasks.
• Check whether scroll or typing interactions trigger repeated layout work.

Good closing: "When React optimization does not fix jank, I look at the browser pipeline: layout, paint, compositing, and forced synchronous measurements."