Advanced React

Chapter 12 · 4 examples

Escaping Flickering UI with useLayoutEffect

What is the problem with useEffect? · Fixing it with useLayoutEffect · Why the fix works: rendering, painting, and browsers · Back to useEffect vs useLayoutEffect · useLayoutEffect in Next.js and other SSR frameworks

  1. Example 1Flickering responsive navigation
  2. Example 2Fixing flicker with useLayoutEffect
  3. Example 3Blocking synchronous painting
  4. Example 4Splitting work with setTimeout