useEffect निर्भरता सरणी और सफाई के साथ सामान्य नुकसान क्या हैं?

Question

Accepted Answer

एक प्रभाव अपनी **निर्भरताओं** के आधार पर फिर से चलता है, और वह सरणी गलत होना React बग का #1 स्रोत है।

## नुकसान 1: लापता निर्भरताएं → पुरानी मान

एक प्रभाव उस रेंडर से मान बंद कर देता है जिसे यह बनाया गया था। यदि आप निर्भरता को छोड़ते हैं, तो यह एक पुरानी को उपयोग करता रहता है:

```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
```

ठीक करें: या तो `count` को deps में जोड़ें, या एक कार्यात्मक updater का उपयोग करें जिसे इसकी आवश्यकता नहीं है (`setCount(c => c + 1)`)।

## नुकसान 2: अस्थिर निर्भरताएं → प्रभाव प्रत्येक रेंडर चलता है

ऑब्जेक्ट/सरणियां/कार्य प्रत्येक रेंडर पर पुनः बनाए जाते हैं, इसलिए वे हर बार "नए" होते हैं और प्रभाव कभी सेट नहीं होता:

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

ठीक करें: आदिम पर निर्भर करें (`[id]`), या `useMemo`/`useCallback` के साथ memoize करें।

## नुकसान 3: भूली हुई सफाई → रिसाव और दौड़

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

सफाई के बिना, एक धीमा पहले का अनुरोध नए के *बाद* हल हो सकता है और ताज़े डेटा को अधिलेखित कर सकता है (एक दौड़ की स्थिति), और सदस्यता/टाइमर ढेर हो जाएंगे। `react-hooks/exhaustive-deps` ESLint नियम अधिकांश लापता-निर्भरता मामलों को पकड़ता है।