Intermediate LevelReact JS & React 19
What is the exact execution timing difference between useLayoutEffect and useEffect?
❓ Interview Prompt: Explain execution timing: `useLayoutEffect` (synchronous after DOM mutation, BEFORE browser paint) vs `useEffect` (asynchronous AFTER browser paint).
The difference between 'useLayoutEffect' and 'useEffect' is execution timing relative to browser painting:
1
'useEffect' (Asynchronous): Runs AFTER React mutates the DOM AND AFTER the browser paints the screen. Does not block visual painting.
2
'useLayoutEffect' (Synchronous): Runs synchronously AFTER React mutates the DOM, but BEFORE the browser paints the screen!
•
Use Case: Measuring DOM layout (element height/scroll) and applying synchronous DOM mutations to prevent visible UI flickering.
Code Implementation Example
jsx
import { useState, useLayoutEffect, useRef } from 'react';
function Tooltip() {
const [height, setHeight] = useState(0);
const ref = useRef();
useLayoutEffect(() => {
// Measure DOM node height BEFORE browser paints screen!
setHeight(ref.current.getBoundingClientRect().height);
}, []); // Prevents visible visual layout flicker!
return <div ref={ref}>Tooltip Height: {height}px</div>;
}💡Measuring DOM node geometry before screen paint with useLayoutEffect.
🎯 Interview Key Takeaway
Use useLayoutEffect for DOM measurements and mutations that must apply before the browser paints to prevent visual flicker.
#useLayoutEffect#useEffect#DOM Timing#Intermediate
Back to all React JS & React 19 Questions→