useEffect dependency array आणि cleanup सोबत सामान्य नुकसान काय आहेत?

Question

Accepted Answer

प्रभाव त्याच्या **dependencies** वर आधारित पुन्हा चालू होतो, आणि तो array चुकीचा मिळवणे हा React bugs चा #1 स्रोत आहे।

## Pitfall 1: missing dependencies → stale values

प्रभाव त्या render च्या मूल्यांवर बंद होतो ज्यामध्ये तो तयार झाला होता। जर तुम्ही कोणत्याही dependency हटवली, तर ते जुने value वापरत राहते:

```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 runs every render

Objects/arrays/functions प्रत्येक render वर पुन्हा तयार होतात, त्यामुळे ते प्रत्येक वेळी "नवीन" असतात आणि प्रभाव कधीही settle होत नाही:

```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 होऊ शकतो आणि fresh data overwrite करू शकतो (एक race condition), आणि subscriptions/timers accumulate होतील। `react-hooks/exhaustive-deps` ESLint नियम बहुतेक missing-dependency cases ला पकडतो.