Care este diferența dintre useEffect și useLayoutEffect?

Question

IT Interview Practice · Accepted Answer

Ambele rulează efecte, dar la **momente diferite în raport cu pictarea browserului** — iar această diferență de timing este exact punctul.

- **`useEffect`** rulează **după** ce browserul a pictat. Este asincron și non-blocant. Folosește-l pentru aproape orice (date, abonări, logging).
- **`useLayoutEffect`** rulează **sincron după ce DOM-ul este modificat, dar ÎNAINTE ca browserul să picteze**. Folosește-l când trebuie să citești layout-ul și să modifici DOM-ul în același frame pentru a evita o pâlpâire vizibilă.

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

## De ce ar trebui să-l folosești vreodată

Imaginez că măsori un element și repoziționezi un tooltip pe baza dimensiunii sale. Cu `useEffect`, utilizatorul ar vedea scurt tooltip-ul în locul greșit, apoi sare:

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

Cu `useEffect`, același cod rulează după pictare → o pâlpâire pe un singur frame.

## De ce nu ar trebui să apelezi la el implicit

- **Blochează pictura**: munca grea în `useLayoutEffect` face ca interfața să pară tremurândă, deoarece browserul nu poate picta până nu se termină.
- **Avertizează în SSR** (nu poate rula pe server, unde nu există layout).

**Regulă de aur:** implicit folosește `useEffect`; folosește `useLayoutEffect` doar pentru măsurători/modificări sincrone ale DOM-ului care altfel ar pâlpâi.

De ce ar trebui să-l folosești vreodată

De ce nu ar trebui să apelezi la el implicit

Întrebări conexe