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: 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: மறந்த 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 செய்யலாம் (a race condition), மற்றும் subscriptions/timers குவிந்து விடும். `react-hooks/exhaustive-deps` ESLint rule பெரும்பாலான missing-dependency cases களைப் பிடிக்கிறது.