useEffect dependency array र cleanup सँग सामान्य pitfalls के हुन्?

Question

Accepted Answer

एक effect यसको **dependencies** को आधारमा पुनः चलिन्छ, र त्यो array गलत हुनु React bugs को #1 स्रोत हो।

## Pitfall 1: missing dependencies → stale values

एक 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: unstable 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: forgotten 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 गर्न सक्छ (एक race condition), र subscriptions/timers बढेर जान्छन्। `react-hooks/exhaustive-deps` ESLint rule ले अधिकांश missing-dependency cases पकड्छ।