Jaka jest różnica między useEffect a useLayoutEffect?

Question

IT Interview Practice · Accepted Answer

Oba uruchamiają efekty, ale w **różnych momentach względem rysowania przez przeglądarkę** — a różnica w czasie to właśnie cały punkt.

- **`useEffect`** uruchamia się **po** tym, jak przeglądarka narysuje. Jest asynchroniczny i nieblokujący. Używaj go do prawie wszystkiego (dane, subskrypcje, logowanie).
- **`useLayoutEffect`** uruchamia się **synchronicznie po mutacji DOM, ale PRZED rysowaniem przez przeglądarkę**. Używaj go, gdy musisz odczytać layout i zmienić DOM w tej samej klatce, aby uniknąć widocznego migotania.

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

## Dlaczego to ważne

Wobraź sobie, że mierzysz element i zmieniam pozycję tooltip na podstawie jego rozmiaru. Z `useEffect` użytkownik na krótko widzi tooltip w złym miejscu, a następnie skoczy:

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

Z `useEffect` ten sam kod uruchamia się po rysowaniu → migotanie w jednej klatce.

## Dlaczego nie powinieneś sięgać po niego domyślnie

- **Blokuje rysowanie**: ciężka praca w `useLayoutEffect` sprawia, że interfejs użytkownika jest nierówny, ponieważ przeglądarka nie może rysować, dopóki się nie skończy.
- **Ostrzega podczas SSR** (nie może działać na serwerze, gdzie nie ma layoutu).

**Złota zasada:** domyślnie używaj `useEffect`; `useLayoutEffect` tylko do synchronicznych pomiarów/mutacji DOM, które inaczej by migotały.

Dlaczego to ważne

Dlaczego nie powinieneś sięgać po niego domyślnie

Powiązane pytania