useEffect અને useLayoutEffect વચ્ચે શું તફાવત છે?

Question

IT Interview Practice · Accepted Answer

બંને અસર ચલાવે છે, પરંતુ **બ્રાউজર પેઇન્ટ સંબંધિત વિવિધ ક્ષણોમાં** — અને તે સમય તફાવત એ સમગ્ર મુદ્દો છે.

- **`useEffect`** બ્રાઉઝર પેઇન્ટ કર્યા **પછી** ચલાવે છે. તે અસિંક્રોનસ અને બિન-બ્લોકિંગ છે. તેનો ઉપયોગ લગભગ બધું માટે કરો (ડેટા, સબસ્ક્રિપ્શન્સ, લોગિંગ).
- **`useLayoutEffect`** **DOM મ્યુટેટ થયા પછી પરંતુ બ્રાઉઝર પેઇન્ટ કરતા પહેલા** સિંક્રોનસલી ચલાવે છે. તેનો ઉપયોગ ત્યારે કરો જ્યારે તમે લેઆઉટ વાંચવું જોઈએ અને પ્રત્યક્ષ ઝબકમી ટાળવા માટે એક જ ફ્રેમમાં DOM બદલવું જોઈએ.

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

## તમે ક્યારેય useLayoutEffect ની જરૂર પડશે તે

કલ્પના કરો કે એલિમેન્ટને માપવું અને તેના કદ પર આધારિત ટૂલટિપને ફરીથી સ્થાપિત કરવું. `useEffect` સાથે, વપરાશકર્તા ટૂલટિપને ખોટી જગ્યાએ સંક્ષિપ્તમાં જોશે, પછી તે કૂદી જાય:

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

`useEffect` સાથે, એ જ કોડ પેઇન્ટ પછી ચલાવે છે → એક-ફ્રેમ ઝબકમી.

## તમે તેને ડિફોલ્ટ દ્વારા પહોંચવું જોઈએ નહીં કેમ

- તે **પેઇન્ટિંગને બ્લોક કરે છે**: `useLayoutEffect` માં ભારે કાર્ય UI ને જંકી અનુભવ કરાવે છે, કારણ કે બ્રાઉઝર તે સમાપ્ત ન થાય ત્યાં સુધી પેઇન્ટ કરી શકતો નથી.
- તે **SSR દરમિયાન ચેતવણી આપે છે** (તે સર્વરે ચલાવી શકાતું નથી, જ્યાં કોઈ લેઆઉટ નથી).

**અંગૂઠો નો નિયમ:** `useEffect` માં ડિફોલ્ટ; ફક્ત `useLayoutEffect` ને સિંક્રોનસ DOM માપ/મ્યુટેશન માટે જ ઉપયોગ કરો જે અન્યથા ઝબકશે.

તમે ક્યારેય useLayoutEffect ની જરૂર પડશે તે

તમે તેને ડિફોલ્ટ દ્વારા પહોંચવું જોઈએ નહીં કેમ

સંબંધિત પ્રશ્નો