Minimize costly DOM read/write operations

Every time you read a layout property after making a DOM change, the browser must synchronously recalculate layout (reflow) before returning the value. Doing this in a loop — even with just 10 elements — can freeze the page for hundreds of milliseconds. This is called layout thrashing and is one of the most common causes of janky animations and slow renders.

Quick Reference

• Never interleave DOM reads (offsetHeight, getBoundingClientRect) with DOM writes (style changes)
• Batch all reads first, then all writes
• Use requestAnimationFrame for visual updates
• Use DocumentFragment or innerHTML for bulk DOM insertion
• Avoid per-frame React state updates across many visible components when a simpler CSS or reduced-frequency approach would work
• Use passive listeners for scroll, touch, and wheel when you do not call preventDefault

Check

Identify any layout thrashing in this code — places where DOM reads and writes are interleaved in loops. Also flag scroll, touch, and wheel listeners that should be passive to avoid blocking the main thread.

Fix