useEffect అంటే ఏమిటి మరియు అది ఎప్పుడు నడుస్తుంది?

Question

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 నుండి చదివే ప్రతిసారీ విలువను చేర్చండి (the `react-hooks/exhaustive-deps` lint నియమం సహాయం చేస్తుంది).