Apa bedane antarane useEffect lan useLayoutEffect?

Question

IT Interview Practice · Accepted Answer

Loro-lorone menjalankan effects, nanging ing **moment beda relatif kanggo browser paint** — lan bedane timing iku kabeh pointé.

- **`useEffect`** menjalankan **sawise** browser wis nglukis. Iku asynchronous lan non-blocking. Gunakna kanggo meh kabeh bab (data, subscriptions, logging).
- **`useLayoutEffect`** menjalankan **synchronously sawise DOM dimutasi nanging SADURUNGE browser nglukis**. Gunakna yen sampeyan kudu maca layout lan ngganti DOM ing frame sing padha kanggo ngilangi flicker sing katon.

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

## Kenapa sampeyan butuh useLayoutEffect

Bayangna ngukur elemen lan ngener manèh tooltip adhedhasar ukurane. Karo `useEffect`, pangguna bakal ringkas-ringkas katon tooltip ing papan sing salah, banjur lumuncat:

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

Karo `useEffect`, kode sing padha menjalankan sawise paint → flicker siji frame.

## Kenapa sampeyan ora kudu nggunakna kanthi standar

- Iku **ngalangi nglukis**: karya abot ing `useLayoutEffect` ndadekno UI krasa gringsing, amarga browser ora bisa nglukis nganti selesai.
- Iku **menehi peringatan sajrone SSR** (ora bisa menjalankan ing server, ing mana ora ana layout).

**Aturan jempol:** standar `useEffect`; mung gunakna `useLayoutEffect` kanggo synchronous DOM measurements/mutations sing bakal flicker manawa ora.

Kenapa sampeyan butuh useLayoutEffect

Kenapa sampeyan ora kudu nggunakna kanthi standar

Pitakon sing gegandhengan