useEffect भनेको के हो र यो कहिले चल्छ?

Question

Accepted Answer

`useEffect` ले **side effects** चलाउँछ — React को rendering को बाहिर गएको काम, जस्तै डेटा fetching, subscriptions, timers, वा manual DOM updates। यो component render भएपछि **पछाडि** चल्छ, side effects लाई render body को बाहिर राखेर (render शुद्ध रहनु पर्छ)।

## dependency array ले timing नियन्त्रण गर्छ

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

- **`[count]`** → पहिलो render पछाडि र जब पनि `count` परिवर्तन भयो त्यो पछाडि चल्छ।
- **`[]`** (खाली) → mount पछाडि **एक पल** चल्छ (एकपटकको setup को लागि राम्रो)।
- **omitted** → **हरेक** render पछाडि चल्छ (कहिल्यै तपाईलाई चाहेको कुरा होइन)।

## Cleanup: एउटा function फर्काउनुहोस्

यदि कुनै effect कुनै कुरा सेट अप गर्छ जुन tear down गर्न आवश्यक छ, cleanup function फर्काउनुहोस्। React यसलाई अगिलो effect चल्नु अघि र component unmount हुँदा कल गर्छ:

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

## किन cleanup महत्त्वपूर्ण छ

बिना यसको, हरेक re-run ले अर्को timer/subscription थप्छ र पुरानो लाई कहिल्यै हटाउँदैन — एक classic memory leak। `[dep]` effect को लागि lifecycle हो: *run effect → (dep changes) → run cleanup → run effect again*।

**Tip:** render को समयमा गणना गर्न सकिने कुराका लागि effects प्रयोग नगर्नुहोस् (यसको सट्टा values derive गर्नुहोस्), र effect ले पढेको हरेक value लाई dependency array मा समावेश गर्नुहोस् (`react-hooks/exhaustive-deps` lint rule मदत गर्छ)।