Wat is het verschil tussen useEffect en useLayoutEffect?

Question

IT Interview Practice · Accepted Answer

Beide voeren effects uit, maar op **verschillende momenten ten opzichte van de browser paint** — en dat timing-verschil is het hele punt.

- **`useEffect`** draait **nadat** de browser geschilderd heeft. Het is asynchron en niet-blokerend. Gebruik het voor zo goed als alles (gegevens, abonnementen, logging).
- **`useLayoutEffect`** draait **synchroon nadat de DOM is gemuteerd maar VOORDAT de browser schildert**. Gebruik het wanneer je lay-out moet lezen en de DOM in hetzelfde frame moet wijzigen om een zichtbaar flikkeren te voorkomen.

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

## Waarom je useLayoutEffect zou nodig hebben

Steel je voor dat je een element meet en een tooltip opnieuw positioneert op basis van de grootte ervan. Met `useEffect` zou de gebruiker de tooltip op de verkeerde plek zien, en dan springt het:

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

Met `useEffect` draait dezelfde code na het schilderen → één frame flikkering.

## Waarom je het standaard niet zou gebruiken

- Het **blokkeert schilderen**: zwaar werk in `useLayoutEffect` maakt de UI voelen hakken, omdat de browser niet kan schilderen totdat het klaar is.
- Het **waarschuwt tijdens SSR** (het kan niet op de server draaien, waar geen lay-out is).

**Vuistregel:** standaard `useEffect`; gebruik alleen `useLayoutEffect` voor synchrone DOM-metingen/mutaties die anders zou flikkeren.

Waarom je useLayoutEffect zou nodig hebben

Waarom je het standaard niet zou gebruiken

Gerelateerde vragen