Rendering Phases

Every yellow flash is a re-render. Interact with the demo, spot what shouldn't be flashing, then open the solution tab to see the fix.

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.

interact to see yellow flashes →
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…