X'inhu d-differenza bejn useEffect u useLayoutEffect?

Question

IT Interview Practice · Accepted Answer

Iż-żewġ juru l-effects, imma f'**mumenti differenti relattiv għat-tpinġija tal-browser** — u din id-differenza tal-ħin hija l-qbila kollha.

- **`useEffect`** tmexxex **wara** li l-browser tkun tpinġet. Hija asinkriona u mhux-bloccatura. Uża għal kwalunkwe ħaġa (dejta, sottoskrizzyoniet, reġistrazzjoni).
- **`useLayoutEffect`** tmexxex **sinkronament wara l-mutazzjoni tal-DOM imma QABEL it-tpinġija tal-browser**. Uża meta għandek taqra l-layout u tbiddel id-DOM fl-istess qafas biex tevita t-tnaqqis viżibbli.

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

## Għaliex tkun għandek bżonn useLayoutEffect

Immaġina li tkejjel element u terġa' tpoġġi t-tooltip ibbażat fuq id-daqs tagħha. B' `useEffect`, l-utent jara t-tooltip fil-post ħat, imbagħad taħlaq:

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

B' `useEffect`, l-istess kodiċi jmexxex wara t-tpinġija → tnaqqis ta' qafas wieħed.

## Għaliex m'għandekx għandek tagħweġ għalih bla l-inadimenti

- Hija **tagħfas it-tpinġija**: xogħol tqal f' `useLayoutEffect` jagħmel l-UI tħuss ħażin, għaliex il-browser ma tistax tpinġi sa ma tispiċċa.
- Hija **tgħarni matul SSR** (ma tistax tmexxi fuq is-server, fejn m'hemm l-ebda layout).

**Regola tar-rigg**: standward għal `useEffect`; biss uża `useLayoutEffect` għal kejl/mutazzjoniet tal-DOM sinkron li mod ieħor jnaqqsu.

Għaliex tkun għandek bżonn useLayoutEffect

Għaliex m'għandekx għandek tagħweġ għalih bla l-inadimenti

Mistoqsijiet relatati