What is the purpose of the useLayoutEffect hook (and how does it differ from useEffect)?

What is the purpose of the useLayoutEffect hook (and how does it differ from useEffect)?

• A. useLayoutEffect runs synchronously after DOM mutations but before the browser paint, ideal for measuring layout or applying mutations; useEffect runs after painting.
• B. useLayoutEffect runs after painting; useEffect runs before paint.
• C. Both run only during unmount.
• D. useEffect runs before DOM mutations; useLayoutEffect after.

Answer: (A)

Timing matters for how you read and update the DOM in React. useLayoutEffect runs synchronously after DOM mutations but before the browser paints. This lets you measure layout or apply mutations that must happen before the user sees the frame, helping avoid flicker or incorrect layout. useEffect, on the other hand, runs after the browser has painted, so these effects don’t block rendering and are good for non-layout work like data fetching, subscriptions, or other side effects that don’t affect how the page should appear in that frame. So the statement that useLayoutEffect runs synchronously after mutations but before paint, and useEffect runs after painting, is the correct distinction.

Timing matters for how you read and update the DOM in React. useLayoutEffect runs synchronously after DOM mutations but before the browser paints. This lets you measure layout or apply mutations that must happen before the user sees the frame, helping avoid flicker or incorrect layout. useEffect, on the other hand, runs after the browser has painted, so these effects don’t block rendering and are good for non-layout work like data fetching, subscriptions, or other side effects that don’t affect how the page should appear in that frame. So the statement that useLayoutEffect runs synchronously after mutations but before paint, and useEffect runs after painting, is the correct distinction.