Ni nini matatizo yanayojuana na useEffect dependency array na cleanup?

Question

Accepted Answer

Athari inajaribu tena kulingana na **utegemezi** wake, na kupata array hiyo si sahihi ni chanzo #1 cha React bugs.

## Kwa nini ni muhimu

Athari inafunga juu ya thamani kutoka kwa render ambayo iliundwa. Ikiwa utaacha utegemezi, itaendelea kutumia wa zamani:

```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: aidha ongeza `count` kwa deps, au tumia functional updater ambayo haihitaji (`setCount(c => c + 1)`).

## Pitfall 2: utegemezi usio imara → athari inaendesha kila render

Vitu/arrays/functions hutengenezwa upya kwa kila render, kwa hiyo ni "mpya" kila wakati na athari haienzi:

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

Fix: tegemea primitive (`[id]`), au memoize na `useMemo`/`useCallback`.

## Pitfall 3: cleanup iliyosahaulika → leaks na 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]);
```

Bila cleanup, ombi la zamani lililosimamia linaweza kutatua *baada ya* jipya na kuandika juu ya data safi (hali ya race), na subscriptions/timers wangekusanyika. ESLint rule `react-hooks/exhaustive-deps` inakamata hali nyingi za utegemezi unaokosekana.