`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` लिंट नियम मदद करता है)।