What are the usecases of useLayoutEffect?

You need to use useLayoutEffect when your effect must run before the browser paints, such as:

• Reading layout measurements (e.g., element size, scroll position)
• Synchronously applying DOM styles to prevent visual flicker
• Animating layout or transitions
• Integrating with third-party libraries that require DOM manipulation

If there's no visual or layout dependency, prefer useEffect — it's more performance-friendly.

useLayoutEffect(() => {
const width = divRef.current.offsetWidth;
if (width < 400) {
divRef.current.style.background = 'blue'; // prevents flicker
}
}, []);