X'inhuma l-pitfalls komuni mal-array ta' dipendenza ta' useEffect u l-cleanup?

Question

Accepted Answer

Effett jerġa' jitħaddem ibbażat fuq id-**dipendenzi** tiegħu, u li tagħmel dik l-array ħażin hija s-sors #1 ta' bugs React.

## Pitfall 1: dipendenza nieqsa → valuri antiki

Effett jieħu l-valuri mir-render li fih ġie kkreat. Jekk taħliex dipendenza, jibqa' juża wieħed antik:

```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
```

Isoluzzjoni: jew żid `count` mid-deps, jew uża functional updater li ma jeħtieġx dik (`setCount(c => c + 1)`).

## Pitfall 2: dipendenza instabbli → effett jitħaddem fuq kull render

Objets/arrays/funzjonijiet jinħolqu mill-ġdid fuq kull render, għalhekk huma "ġodda" kull ħin u l-effett qatt ma jistabbilizza:

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

Isoluzzjoni:iddependi fuq il-primittiv (`[id]`), jew memorizza ma' `useMemo`/`useCallback`.

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

Bla l-cleanup, request antik li jkun bil-bogħod jista' jsolvi *wara* wieħed aktar ġdid u joverwrite data friska (race condition), u subscriptions/timers jik-kumulu. Ir-regola ESLint `react-hooks/exhaustive-deps` taqbad ħafna mill-każi ta' dipendenza nieqsa.