What is the difference between useEffect and useLayoutEffect?

Feature useEffect useLayoutEffect

When it runs After paint Before paint (after DOM mutation)

Use for Async tasks, data

fetching

Measuring DOM, sync layout

Blocking paint? ❌ No ✅ Yes (can cause jank)

🔍 Use useLayoutEffect only when layout measurement or synchronously modifying

DOM is necessary.