Q44: Why can useLayoutEffect cause performance degradation if misused?
useLayoutEffect runs synchronously after DOM mutations but before the browser paints. Because it blocks main thread painting until execution completes, executing heavy calculations inside useLayoutEffect causes noticeable screen lag and delays visual frames.
Blocking Paint Operations
// ❌ BAD: Blocking paint with heavy calculations
useLayoutEffect(() => {
computeHeavyLayout(data); // Blocks screen paint!
}, [data]);
// ✅ GOOD: Asynchronous non-blocking effect
useEffect(() => {
computeHeavyLayout(data);
}, [data]);💡 Offloading heavy computations to useEffect keeps screen frame painting smooth.
Key Takeaways
- Synchronous execution blocks browser paint operations.
- Reserve exclusively for layout measurements; use
useEffectfor all standard side-effects.
Knowledge Check
Why does heavy execution inside useLayoutEffect cause frame drops?