# useEffect vs useLayoutEffect

> A tooltip must center itself by measuring its width. Change useEffect for useLayoutEffect — one line, but it makes the difference between a visible flicker and a perfect first frame.

- Difficulty: beginner
- Tags: useEffect, useLayoutEffect, useRef
- Estimated time: 15 minutes
- Tests: 1
- Requires subscription: no

## 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](https://react.dev/reference/react/useLayoutEffect) — runs before paint, use it for DOM measurements.
- [useEffect](https://react.dev/reference/react/useEffect) — runs after paint, use it for logging and subscriptions.


## Tests

01. uses useLayoutEffect for the DOM measurement