Cilat janë grackat e zakonshme me vektorin e varësisë useEffect dhe pastrimin?

Question

Accepted Answer

Një efekt rihyp bazuar në **varësitë** e tij, dhe ta bësh gabim atë vektor është burimi #1 i gabimeve React.

## Pse ka rëndësi

Një efekt mbyll vlerat nga renderimi në të cilin u krijua. Nëse lëshoni një varësi, ai do të vazhdojë të përdorë një të vjetër:

```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: ose shtoni `count` në deps, ose përdorni një përditësues funksional që nuk ka nevojë për të (`setCount(c => c + 1)`).

## Gracka 2: varësi të paqëndrueshme → efekti shkon në çdo renderim

Objektet/vektorët/funksionet rikrijohen në çdo renderim, kështu që janë "të rinj" çdo herë dhe efekti nuk stabilozohet kurrë:

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

Fix: varet nga primitiva (`[id]`), ose memoizo me `useMemo`/`useCallback`.

## Gracka 3: pastrimi i harruar → kebje dhe gara

```jsx
useEffect(() => {
  const ctrl = new AbortController();
  fetch(url, { signal: ctrl.signal }).then(setData);
  return () => ctrl.abort(); // cancels the old request when `url` changes
}, [url]);
```

Pa pastrimin, një kërkesë e vjetër më e ngadaltë mund të zgjidhet *pas* një më të re dhe të mbishkruajë të dhëna të freskëta (një gara), dhe abonimet/kohëmatësat do të grumbullohen. Rregulla ESLint `react-hooks/exhaustive-deps` zbulon shumicën e rasteve të varësive që mungojnë.