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 માં ઉમેરો, અથવા ફંક્શનલ અપડેટર વાપરો જે તેની જરૂર નથી (`setCount(c => c + 1)`).

## ક્ષતિ 2: અસ્થિર અવલંબન → અસર દરેક રેન્ડર ચાલે છે

ઑબ્જેક્ટ/આરે/ફંક્શન દરેક રેન્ડર પર પુનઃનિર્માણ થાય છે, તેથી તે દરેક વખતે "નવું" હોય છે અને અસર ક્યારેય સુધતી નથી:

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

ફિક્સ: આદિમ (`[id]`) પર આધારિત હોય, અથવા `useMemo`/`useCallback` સાથે મેમોઇજ કરો.

## ક્ષતિ 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 નિયમ મોટાભાગે ગુમ કરેલા-અવલંબન કેસો પકડે છે.