Mi a különbség az useEffect és az useLayoutEffect között?

Question

Accepted Answer

Mindkettő effektusokat futtat, de **a böngésző festésének különböző pillanataiban** — és ez az időbeli különbség az egész lényeg.

- **`useEffect`** a böngésző festése **után** fut le. Aszinkron és nem blokkoló. Használd szinte mindenhez (adatok, előfizetések, naplózás).
- **`useLayoutEffect`** **szinkron módon fut a DOM mutálása után, de MIELŐTT a böngésző festene**. Használd akkor, amikor olvasnia kell az elrendezést és ugyanabban a keretben módosítania kell a DOM-ot, hogy elkerüld a látható villogást.

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

## Miért lenne szükséged az useLayoutEffect-re

Képzelj el egy elemet mérve és egy tooltip-et újrapozicionálva az alapján. `useEffect` esetén a felhasználó röviden a rossz helyen látná a tooltip-et, majd ugrik:

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

`useEffect` esetén ugyanez a kód fut a festés után → egy keretből villogás.

## Miért ne érj rá alapértelmezésben

- **Blokkolja a festést**: nehéz munka az `useLayoutEffect`-ben janky UI-t eredményez, mert a böngésző addig nem tud festeni, amíg be nem fejeződik.
- **Figyelmeztet az SSR alatt** (nem futhat a szerveren, ahol nincs elrendezés).

**Hüvelykujjszabály:** alapértelmezésben `useEffect`; csak szinkron DOM mérésekhez/mutációkhoz használj `useLayoutEffect`-et, amely egyébként villogna.