Rendering Phases

Hands-on practice for this lecture. Work through the exercises and quizzes to reinforce what you've learned.

1

Exercise 1 of 1

useLayoutEffect vs useEffect Timing

Measure a DOM element in useEffect vs useLayoutEffect. See which phase gives you accurate dimensions before the browser paints.

DOM measurement in useEffect — fires after paint

Measured element

  • Alpha
  • Beta

Phase log

❌ Measuring in useEffect

Fires after browser paint. A tooltip or overlay repositioned here causes a visible flash — old position → new position.

Recent measurements

Click the button…

Practice: Rendering Phases — Interactive Exercises | Durgesh Rai