Hva er forskjellen mellom useEffect og useLayoutEffect?

Question

Accepted Answer

Begge kjører effekter, men på **ulike tidspunkter i forhold til browsermalinger** — og denne tidspunktforskjellen er hele poenget.

- **`useEffect`** kjører **etter** at nettleseren har malt. Det er asynkront og ikke-blokkerende. Bruk det til nesten alt (data, abonnementer, logging).
- **`useLayoutEffect`** kjører **synkront etter at DOM er mutert, men FØR nettleseren maler**. Bruk det når du må lese layout og endre DOM i samme frame for å unngå synlig flimring.

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

## Hvorfor du ville trenge useLayoutEffect

Imaginer at du måler et element og repositjonerer en tooltip basert på størrelsen. Med `useEffect` ville brukeren kort se tooltip på feil plass, så den hopper:

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

Med `useEffect` kjører samme kode etter maling → en frame flimring.

## Hvorfor du ikke skal gripe til det som standard

- Det **blokkerer malinger**: tungt arbeid i `useLayoutEffect` gjør at UI-en føles hakket, fordi nettleseren ikke kan male før det er ferdig.
- Det **advarer under SSR** (det kan ikke kjøre på serveren, der det ikke finnes layout).

**Tommelfingerregel:** standard til `useEffect`; bruk bare `useLayoutEffect` for synkrone DOM-målinger/mutasjoner som ellers ville flimre.