Vad är skillnaden mellan useEffect och useLayoutEffect?

Question

IT Interview Practice · Accepted Answer

Båda kör effekter, men vid **olika tidpunkter i förhållande till webbläsarens rendering** — och den tidsskillnaden är själva poängen.

- **`useEffect`** körs **efter** att webbläsaren har renderat. Det är asynkront och icke-blockerande. Använd det för nästan allt (data, prenumerationer, loggning).
- **`useLayoutEffect`** körs **synkront efter att DOM har muterades men FÖRE webbläsaren renderar**. Använd det när du måste läsa layout och ändra DOM i samma frame för att undvika ett synligt flimmer.

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

## Varför du någonsin skulle behöva useLayoutEffect

Imaginera att mäta ett element och ompositionera en tooltip baserat på dess storlek. Med `useEffect` skulle användaren kortfattat se tooltip på fel plats, sedan hoppar den:

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

Med `useEffect` körs samma kod efter rendering → ett flimmer på en frame.

## Varför du inte bör nå efter det som standard

- Det **blockerar rendering**: tungt arbete i `useLayoutEffect` gör att gränssnittet känns hakigt, eftersom webbläsaren inte kan rendera förrän det är färdigt.
- Det **varnar under SSR** (det kan inte köras på servern, där det inte finns någon layout).

**Tumregel:** standardisera `useEffect`; använd endast `useLayoutEffect` för synkrona DOM-mätningar/mutationer som annars skulle flimra.

Varför du någonsin skulle behöva useLayoutEffect

Varför du inte bör nå efter det som standard

Relaterade frågor