Kuna nini tofauti kati ya useEffect na useLayoutEffect?

Question

Accepted Answer

Zote zinakimbia athari, lakini kwa **wakati tofauti unaohusiana na randevu ya kivinjari** — na tofauti hiyo ya wakati ndio kitu chote.

- **`useEffect`** inaendesha **baada** ya kivinjari kupiga hesabu. Ni ya asynchronous na isiyozuia. Itumie kwa karibu kila kitu (data, subscriptions, kuandika kumbukumbu).
- **`useLayoutEffect`** inaendesha **kwa wakati mmoja baada ya DOM kugeuzwa lakini KABLA ya kivinjari kupiga hesabu**. Itumie wakati lazima kusoma weka na kubadilisha DOM katika fremu sawa ili kuepuka kung'ang'ana kinachoonekana.

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

## Kwa nini ungetulia useLayoutEffect

Imagine kupima kipengele na kuorodhesha upya kidokezo kinachotokana na ukubwa wake. Kwa `useEffect`, mtumiaji angebaki na fupi kuona kidokezo mahali pasipo sahihi, kisha inakufa:

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

Kwa `useEffect`, nambari sawa inaendesha baada ya randevu → kung'ang'ana moja la fremu.

## Kwa nini huwezi kuifikia kwa kawaida

- Ni **zizuia randevu**: kazi kubwa katika `useLayoutEffect` inasababisha UI kuhisi vibaya, kwa sababu kivinjari hakiwezi kupiga hesabu hadi itakamilika.
- Ni **onyo wakati wa SSR** (haiwezi kuendesha kwenye seva, mahali ambapo hakuna weka).

**Kanuni ya kidole**: chaguo msingi la `useEffect`; tumia tu `useLayoutEffect` kwa maamuzi ya DOM ya uwiano/mabadiliko ambayo vinginevyo vingeleza.