useLayoutEffect vs useEffect for Synchronous DOM Operations

useEffect only has access to refs after a full second render cycle, while useLayoutEffect can read refs immediately on the first render.

useLayoutEffect runs asynchronously in a microtask, giving it earlier access to layout information than useEffect's macrotask scheduling.

useEffect fires asynchronously after the browser has already painted, so any DOM measurement and resulting style correction made inside it happens visibly after an incorrect frame is shown; useLayoutEffect fires synchronously after DOM mutations but before the browser paints, letting the correction apply before anything is visible.

Both hooks fire at identical times in modern React; the naming difference is purely stylistic and does not affect rendering order.