Overview

This challenge is simple — you only need to change useEffect for useLayoutEffect in the tooltip component. But it exists to demonstrate a real situation where the difference matters: when you measure the DOM to position an element.

Open the starter, hover the trigger, and watch the tooltip flicker — it appears uncentered for a moment before snapping to the middle. That's because useEffect runs after the browser already painted the screen. With useLayoutEffect the measurement happens before paint, so the tooltip is centered from the very first frame.

Tip: if the flicker is too fast to see, open DevTools → Performance tab → enable CPU throttling (4x or 6x slowdown). Then hover again — the delay becomes obvious.

Requirements

• Replace useEffect with useLayoutEffect in TooltipContent so the tooltip is centered before the browser paints, avoiding the flicker.

Notes

• useLayoutEffect — runs before paint, use it for DOM measurements.
• useEffect — runs after paint, use it for logging and subscriptions.

Tests

1. uses useLayoutEffect for the DOM measurement