How does useLayoutEffect cause layout thrashing?

The useLayoutEffect can cause layout thrashing when you repeatedly read and write to the DOM in ways that force the browser to recalculate layout multiple times per frame. This is because useLayoutEffect runs before the browser paints, these reflows happen synchronously, blocking rendering and degrading performance.

Example:

function ThrashingComponent() {
 const ref = useRef();

 useLayoutEffect(() => {
   const height = ref.current.offsetHeight; //Read
   ref.current.style.height = height + 20 + 'px'; //Write
   const newHeight = ref.current.offsetHeight; //Read again — forces reflow
 }, []);

 return <div ref={ref}>Hello</div>;
}

In the above code, each read/write cycle triggers synchronous reflows, blocking the main thread and delays UI rendering.

This issue can be avoided by batching your DOM reads and writes and prevent unnecessary reads after writes.