`useEffect` શું છે અને તે ક્યારે ચાલે છે?

Question

Accepted Answer

`useEffect` **સાઇડ ઇફેક્ટ્સ** ચલાવે છે — એવું કાર્ય જે React ના રેન્ડરિંગની બહાર જાય છે, જેમ કે ડેટા ફેચિંગ, સબ્સ્ક્રિપ્શન્સ, ટાઇમર્સ, અથવા મેનુઅલ DOM અપડેટ્સ. તે કમ્પોનેન્ટ રેન્ડર કર્યા **પછી** ચાલે છે, સાઇડ ઇફેક્ટ્સને રેન્ડર બોડીમાંથી બહાર રાખે છે (રેન્ડર શુદ્ધ રહેવું જોઈએ).

## ডিপેન્ડેન્સી એરે સમયને નિયંત્રિત કરે છે

```jsx
useEffect(() => {
  document.title = `Count: ${count}`;
}, [count]); // ← dependency array
```

- **`[count]`** → પ્રથમ રેન્ડર પછી અને જ્યારે પણ `count` બદલાય તો ચાલે છે.
- **`[]`** (ખાલી) → માઉન્ટ પછી **એક વાર** ચાલે છે (એક સમયની સેટઅપ માટે સારું).
- **છોડી દેવું** → **દરેક** રેન્ડર પછી ચાલે છે (ભાગ્યે જ તમે જોઈતું છે).

## ક્લીનઅપ: ફંક્શન પરત કરો

જો ઇફેક્ટ કોઈ એવું સેટ કરે છે જેને તોડવાની જરૂર છે, તો ક્લીનઅપ ફંક્શન પરત કરો. React તેને આગલી ઇફેક્ટ રૂન પહેલાં અને જ્યારે કમ્પોનેન્ટ અનમાઉન્ટ થાય ત્યારે કોલ કરે છે:

```jsx
useEffect(() => {
  const id = setInterval(() => setN(n => n + 1), 1000);
  return () => clearInterval(id); // cleanup → prevents a leaked timer
}, []);
```

## ક્લીનઅપ શા માટે મહત્વપૂર્ણ છે

તેના વિના, પ્રત્યેક રી-રૂન અન્ય ટાઇમર/સબ્સ્ક્રિપ્શન ઉમેરશે અને કોઈ પણ સમય પુરાણુ ને દૂર કરશે નહીં — એક ક્લાસિક મેમરી લીક. `[dep]` ઇફેક્ટ માટેનું લાઇફસાઇકલ છે: *ઇફેક્ટ ચલાવો → (dep બદલાય છે) → ક્લીનઅપ ચલાવો → ઇફેક્ટ ફરીથી ચલાવો*.

**ટીપ:** રેન્ડર કરતી વખતે તમે ગણતરી કરી શકો તેવી વસ્તુઓ માટે ઇફેક્ટ્સ ન વાપરો (બદલે મૂલ્યો મેળવો), અને ઇફેક્ટ વાંચે તેવા દરેક મૂલ્યને ડિપેન્ડેન્સી એરેમાં શામેલ કરો (`react-hooks/exhaustive-deps` lint નિયમ મદદ કરે છે).