Layout thrashing
Also called forced synchronous layout or forced reflow
A slowdown caused by code that alternates style changes with size reads, forcing the browser to recalculate layout many times in one frame.
import { useLayoutEffect, useRef } from 'react';
type Plan = { name: string; features: string[] };
export function PlanCards({ plans }: { plans: Plan[] }) {
const listRef = useRef<HTMLUListElement>(null);
useLayoutEffect(() => {
const cards = Array.from(listRef.current?.children ?? []) as HTMLElement[];
for (const card of cards) card.style.height = '';
// Read every height in one pass, so one layout answers them all...
const tallest = Math.max(...cards.map((card) => card.offsetHeight));
// ...then write every height. Reading offsetHeight between writes
// would force a fresh layout for every card.
for (const card of cards) card.style.height = `${tallest}px`;
}, [plans]);
// Where you can, let CSS do it with no measuring: a grid with auto-rows-fr.
return (
<ul ref={listRef} className='flex flex-wrap items-start gap-4'>
{plans.map((plan) => (
<li
key={plan.name}
className='w-60 rounded-xl border bg-background p-5'
>
<h3 className='font-semibold'>{plan.name}</h3>
<ul className='mt-2 space-y-1 text-sm text-muted-foreground'>
{plan.features.map((feature) => (
<li key={feature}>{feature}</li>
))}
</ul>
</li>
))}
</ul>
);
}Fix layout thrashing in the function that equalizes card heights: read every card's offsetHeight in one loop first, then set all the heights in a second loop, and run it inside requestAnimationFrame. Where possible, replace the manual measuring with CSS Grid or a ResizeObserver.
Paste into Layerwise or any AI coding tool.
What is Layout thrashing?
Normally the browser collects your style changes and recalculates layout once per frame. Reading a layout value such as offsetHeight, offsetWidth, or getBoundingClientRect() right after a change forces it to lay out the page immediately so the answer is correct. Do that in a loop, changing then measuring element after element, and the browser redoes layout on every pass.
It often hides in code that sizes a list of elements, matches card heights, or measures things on every scroll event. In the Chrome DevTools Performance panel it shows up as a run of purple Layout blocks with a forced reflow warning.
The fix is to batch: read every measurement first, then make every change. ResizeObserver reports sizes without forcing extra layouts, and CSS Grid or Flexbox can often replace the measuring entirely. For motion, animating width, height, top, or left makes the browser lay out again on every frame, while transform and opacity usually skip layout.
Often confused with
- Jank
- Jank is the stutter you see. Layout thrashing is one common cause of it.
Related terms
All termsJank
Visible stutter in an animation or scroll, caused when the browser misses frames because it cannot finish its work in time.
GPU acceleration
A browser technique where the graphics chip moves, fades, or scales an element on its own layer instead of redrawing the page every frame.
Frame rate (FPS)
The number of frames a screen draws each second; around 60 fps, motion looks smooth, and at lower rates it starts to look choppy.
Debounce
A technique that waits for a short pause in typing or other repeated events, then runs the work once instead of on every keystroke.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.