useEffect dependency array మరియు cleanup లతో సాధారణ ఆపదలు ఏమిటి?

Question

Accepted Answer

ఒక effect దాని **dependencies** ఆధారంగా తిరిగి నడుస్తుంది, మరియు ఆ array ను సరిగా పొందకపోవడం #1 React bugs యొక్క మూలం.

## ఇది ఎందుకు ముఖ్యమైనది

ఒక effect దానిని సృష్టించిన render నుండి విలువలను మూయుకుంటుంది. మీరు ఒక dependency ను విస్మరిస్తే, అది పాతది ఉపయోగించుకుంటూ ఉంటుంది:

```jsx
useEffect(() => {
  const id = setInterval(() => {
    console.log(count); // ❌ always logs the count from the FIRST render (0)
  }, 1000);
  return () => clearInterval(id);
}, []); // empty deps → effect never re-created → `count` frozen at 0
```

Fix: `count` ను deps కు జోడించండి, లేదా functional updater ని ఉపయోగించండి దానికి అవసరం లేనిది (`setCount(c => c + 1)`).

## Pitfall 2: అస్థిర dependencies → effect ప్రతి render లో నడుస్తుంది

Objects/arrays/functions ప్రతి render లో తిరిగి సృష్టించబడతాయి, కాబట్టి అవి ప్రతిసారీ "కొత్త" మరియు effect ఎప్పుడూ స్థిరపడదు:

```jsx
const options = { id }; // ❌ new object every render
useEffect(() => { load(options); }, [options]); // runs every render
```

Fix: primitive ని అందులో ఆధారపడండి (`[id]`), లేదా `useMemo`/`useCallback` తో memoize చేయండి.

## Pitfall 3: మరిచిన cleanup → leaks మరియు races

```jsx
useEffect(() => {
  const ctrl = new AbortController();
  fetch(url, { signal: ctrl.signal }).then(setData);
  return () => ctrl.abort(); // cancels the old request when `url` changes
}, [url]);
```

Cleanup లేకుండా, నెమ్మదిగా ఉన్న ముందటి request *కొత్త ఒక తర్వాత* resolve అవుతుంది మరియు తాజా డేటా ను overwrite చేస్తుంది (a race condition), మరియు subscriptions/timers సమ్మిలిపోతాయి. `react-hooks/exhaustive-deps` ESLint rule చాలా missing-dependency cases లను పట్టుకుంటుంది.