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
 }
}, []);