When useLayoutEffect Runs vs useEffect
Learn that useLayoutEffect fires synchronously after DOM mutations but before the browser paints.
useLayoutEffect Timing
useLayoutEffect fires synchronously immediately after React has applied DOM mutations, but before the browser has had a chance to paint those changes. From the browser's perspective, the layout effect and the DOM mutations are part of the same uninterrupted synchronous block of work.
useEffect Timing
useEffect fires asynchronously after the browser has completed its paint. The user sees the updated UI first, and then the effect runs. This makes useEffect less disruptive to rendering performance, but means that any visible changes caused by the effect will result in a second paint cycle.
All lessons in this course
- The Rendering Phase and DOM Commit
- When useLayoutEffect Runs vs useEffect
- Measuring DOM Elements with useLayoutEffect
- Avoiding Layout Thrash and Visual Flicker