useEffect म्हणजे काय आणि ते कधी चालते?

Question

IT Interview Practice · Accepted Answer

`useEffect` **साइड इफेक्ट्स** चालवते — असे काम जे React च्या रेंडरिंगच्या बाहेर जाते, जसे डेटा फेचिंग, सबस्क्रिप्शन्स, टाइमर्स, किंवा मॅनुअल DOM अपडेट्स. ते कम्पोनेंट रेंडर होण्यानंतर **चालते**, साइड इफेक्ट्स रेंडर बॉडीच्या बाहेर ठेवते (रेंडर शुद्ध राहणे आवश्यक आहे).

## Dependency array टाइमिंग नियंत्रित करते

```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 बदलता) → क्लीनअप चालवा → इफेक्ट पुन्हा चालवा*.

**टिप:** ज्या गोष्टी तुम्ही रेंडरदरम्यान कॉम्प्यूट करू शकता (व्हॅल्यूज व्युत्पन्न करा) त्यासाठी इफेक्ट्स वापरू नका, आणि इफेक्ट जी प्रत्येक व्हॅल्यू वाचते त्यांना dependency array मध्ये समाविष्ट करा (`react-hooks/exhaustive-deps` lint नियम मदत करते).

Dependency array टाइमिंग नियंत्रित करते

क्लीनअप: फंक्शन रिटर्न करा

क्लीनअप महत्वाचे का आहे

संबंधित प्रश्न