Menene bambanci tsakanin useEffect da useLayoutEffect?

Question

IT Interview Practice · Accepted Answer

Duka suna tafi da jiya, amma a **lokuta daban-daban maka lissafin baje fuska" ta kijaski** — kuma bambancin lokaci shine gajimare koma-komai.

- **`useEffect`** yana tafiya **bayan** da kijaski ya zaci. Yana aiki ba-aiki kuma ba-toshe. Yi amfani dashi don kusan komai (bayanai, rubuta, tura bayanai).
- **`useLayoutEffect`** yana tafiya **akai-akai bayan DOM ta samo sauyi amma KUN kijaski ya fadi**. Yi amfani dashi lokacin da dole ne ka karanta tsarawa da canja DOM a cikin frame ɗaya don rigije wa jirye.

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

## Me take a-kaita useLayoutEffect a nan

Zantu abin da aka auna kuma sake wurin tooltip bisa ga girshi. Da `useEffect`, mai amfani zai iya ganin tooltip a wuri mara kyau a gida, sannan ya tashi:

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

Da `useEffect`, gida iri gida ta tahi bayan jirye → jirye daya sakawa.

## Me take ba ya kamata ka nufi shi ta tsinkayi

- Yana **toshe jirye**: aiki mai nauyi a `useLayoutEffect` ya sanya UI jiya da aunin, domin kijaski ba zai iya jirye ba sai da ta gama.
- Yana **gargajiya a lokacin SSR** (ba zai iya tafiya akan sabar, inda babu tsarawa).

**Dokar mani:** tsinkayi ga `useEffect`; kawai yi amfani da `useLayoutEffect` don daidai-daidai DOM iyakanta/sauyi waɗanda ba zai iya tunanin jirye.

Me take a-kaita useLayoutEffect a nan

Me take ba ya kamata ka nufi shi ta tsinkayi

Tambayoyi masu alaƙa