Kakšna je razlika med useEffect in useLayoutEffect?

Question

IT Interview Practice · Accepted Answer

Oba izvršita učinke, vendar v **različnih trenutkih glede na brisanje brskalnika** — in ta razlika v časovanju je v resnici vse.

- **`useEffect`** se izvršiti **po** tem, ko je brskalnik narisan. Je asinkhron in neblokira. Uporabi ga za skoraj vse (podatke, naročnine, beleženje).
- **`useLayoutEffect`** se izvršiti **sinhronsko po spremembi DOM, vendar PRED branjem brskalnika**. Uporabi ga, ko moraš prebrati razporeditev in spremeniti DOM v istim kadru, da se izogneš vidnemu utripanju.

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

## Zakaj bi to kdaj potreboval

Si predstavljaj, da merita element in preprostitoniraš namig orodja na podlagi njegove velikosti. Z `useEffect` bi uporabnik na kratko videl namig na napačnem mestu, nato pa skoči:

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

Z `useEffect` se ista koda izvršiti po branju → utripanje enega kadra.

## Zakaj se temu po privzeto ne bi moral lotiti

- **Blokira branje**: težko delo v `useLayoutEffect` naredi vmesnik spozen, ker brskalnik ne more brisati, dokler se ne konča.
- **Opozarja pri SSR** (ne more delovati na strežniku, kjer ni razporeditve).

**Pravilo palca:** privzeto uporabi `useEffect`; `useLayoutEffect` samo za sinhrona merjenja/spremembe DOM, ki bi drugače utripali.

Zakaj bi to kdaj potreboval

Zakaj se temu po privzeto ne bi moral lotiti

Povezana vprašanja