Koja je razlika između useEffect i useLayoutEffect?

Question

Accepted Answer

Oba poklapaju efekte, ali u **različitim trenucima u odnosu na crtanje preglednika** — i ta vremenska razlika je cijela poanta.

- **`useEffect`** pokreće se **nakon** što preglednik nacrta. Asinkron je i ne blokira. Koristite ga za gotovo sve (podatke, pretplate, zapisivanje).
- **`useLayoutEffect`** pokreće se **sinkrono nakon što je DOM mutiran ali PRIJE nego što preglednik nacrta**. Koristite ga kada trebate pročitati raspogled i promijeniti DOM u istom okviru kako biste izbjegli vidljiv treperenje.

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

## Zašto bi vam trebao useLayoutEffect

Zamisli da mjeriš element i ponovno pozicioniraš tooltip na osnovu njegove veličine. S `useEffect`, korisnik bi ukratko vidio tooltip na krivoj lokaciji, zatim skače:

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

S `useEffect`, isti kod se izvršava nakon crtanja → treperenje od jednog okvira.

## Zašto ga ne biste trebali dohvatiti kao zadanu vrijednost

- Blokira **crtanje**: teški rad u `useLayoutEffect` čini UI napetim, jer preglednik ne može crtati dok se ne završi.
- **Upozorava tijekom SSR-a** (ne može se pokrenuti na serveru, gdje nema rasporeda).

**Pravilo palca:** zadano na `useEffect`; koristite `useLayoutEffect` samo za sinkrona mjerenja DOM-a/mutacije koje bi inače treperale.