useEffect ਨਿਰਭਰਤਾ ਐਰੇ ਅਤੇ ਸਫਾਈ ਦੇ ਨਾਲ ਆਮ ਸਮੱਸਿਆਵਾਂ ਕੀ ਹਨ?

Question

Accepted Answer

ਇੱਕ ਪ੍ਰਭਾਵ ਆਪਣੀ **ਨਿਰਭਰਤਾ** ਦੇ ਅਧਾਰ ਤੇ ਦੁਬਾਰਾ ਚਲਦਾ ਹੈ, ਅਤੇ ਉਸ ਐਰੇ ਨੂੰ ਗਲਤ ਕਰਨਾ React ਬਗ ਦਾ #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
```

Fix: ਜਾਂ ਤਾਂ deps ਵਿੱਚ `count` ਸ਼ਾਮਲ ਕਰੋ, ਜਾਂ ਇੱਕ ਫੰਕਸ਼ਨਲ updater ਵਰਤੋ ਜਿਸ ਨੂੰ ਇਸ ਦੀ ਲੋੜ ਨਹੀਂ (`setCount(c => c + 1)`)।

## ਸਮੱਸਿਆ 2: ਅਸਥਿਰ ਨਿਰਭਰਤਾਵਾਂ → ਪ੍ਰਭਾਵ ਹਰ ਰੈਂਡਰ ਤੋਂ ਚਲਦਾ ਹੈ

Objects/arrays/functions ਹਰ ਰੈਂਡਰ ਤੇ ਦੁਬਾਰਾ ਬਣਾਏ ਜਾਂਦੇ ਹਨ, ਇਸ ਲਈ ਉਹ ਹਰ ਵਾਰ "ਨਵੇ" ਹਨ ਅਤੇ ਪ੍ਰਭਾਵ ਕਦੇ ਸਥਿਰ ਨਹੀਂ ਹੁੰਦਾ:

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

Fix: primitive ਤੇ ਨਿਰਭਰ ਕਰੋ (`[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]);
```

ਸਫਾਈ ਤੋਂ ਬਿਨਾਂ, ਇੱਕ ਵਿਲੰਬ ਵਾਲੀ ਪੁਰਾਣੀ request ਇੱਕ ਨਵੀ ਤੋਂ *ਬਾਅਦ* ਵਿੱਚ resolve ਹੋ ਸਕਦੀ ਹੈ ਅਤੇ ਤਾਜ਼ਾ ਡੇਟਾ ਨੂੰ overwrite ਕਰ ਸਕਦੀ ਹੈ (ਇੱਕ race condition), ਅਤੇ subscriptions/timers ਇਕੱਠੇ ਹੋ ਜਾਣਗੇ। `react-hooks/exhaustive-deps` ESLint ਨਿਯਮ ਜ਼ਿਆਦਾਤਰ ਲੁਪਤ-ਨਿਰਭਰਤਾ ਮਾਮਲੇ ਫੜਦਾ ਹੈ।