Hvad er forskellen mellem useEffect og useLayoutEffect?

Question

Accepted Answer

Begge kører effects, men på **forskellige tidspunkter i forhold til browserens tegning** — og netop denne tidsforskjel er hele pointen.

- **`useEffect`** kører **efter** browseren har tegnet siden. Det er asynkront og ikke-blokerende. Brug det til næsten alt (data, subscriptions, logging).
- **`useLayoutEffect`** kører **synkront efter DOM er muteret, men FØR browseren tegner**. Brug det når du skal læse layout og ændre DOM i samme frame for at undgå synlig flimren.

```text
render → DOM updated → [useLayoutEffect runs] → browser paints → [useEffect runs]
```

## Hvorfor du nogensinde ville have brug for useLayoutEffect

Foregin dig at måle et element og repositionere et tooltip baseret på dets størrelse. Med `useEffect` ville brugeren kort se tooltippet på det forkerte sted, så springer det:

```jsx
useLayoutEffect(() => {
  const { height } = ref.current.getBoundingClientRect();
  setTooltipTop(-height); // applied BEFORE paint → no visible jump
}, []);
```

Med `useEffect` kører samme kode efter tegning → en frame-flimren.

## Hvorfor du ikke bør gribe til det som standard

- Det **blokerer tegning**: tungt arbejde i `useLayoutEffect` gør brugergrænsefladen føles hakket, fordi browseren ikke kan tegne før den er færdig.
- Det **advarer under SSR** (det kan ikke køre på serveren, hvor der ingen layout er).

**Tommelfingerregel:** brug som standard `useEffect`; brug kun `useLayoutEffect` til synkrone DOM-målinger/mutationer der ellers ville flimre.