How does useLayoutEffect cause layout thrashing?
Assesses fundamental understanding of React conventions, runtime behavior, and memory/performance considerations.
Hiring managers look for precision, avoidance of ambiguous jargon, and ability to explain trade-offs under real production conditions.
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.
Candidate Response Strategy & Interview Tips
- Start with a concise one-sentence summary: Deliver a direct, confident answer first before expanding into nuances.
- Demonstrate real-world trade-offs: Discuss where this approach excels and when you would avoid it in production systems.
- Discuss complexity & edge cases: Proactively explain time/space complexity or boundary conditions (null values, scale limits).
- Prepare for interviewer follow-ups: Technical hiring panels frequently probe deeper into concurrency, backward compatibility, or alternative libraries.