Menene gargajiya gida tare da useEffect dogon dogara da tsaftace?

Question

Accepted Answer

Tasiri ya sake fito bisa ga **dogara**, kuma samun wannan jerin karya shine tushen #1 na kurakuran React.

## Gida 1: dogara da aka rasa → tsoffin daraja

Tasiri yana rufe daraja daga fito gida da aka samarya a gida. Idan ba ka bar dogara ba, yana ci gaba da amfani da tsofa:

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

Gareshi: ko dai ka saka `count` zuwa deps, ko ka yi amfani da mai bada labarai mai aiki wanda bai bugi ba (`setCount(c => c + 1)`).

## Gida 2: dogara marasa kwanciyar hankali → tasiri gudu kowane fito

Abubuwa/tsarori/ayyukan ana samarwa a kowane fito, don haka sune "sabon" kowane lokaci kuma tasiri bai dadi ba:

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

Gareshi: dogara ga primitive (`[id]`), ko ka tsara tare da `useMemo`/`useCallback`.

## Gida 3: tsaftace da aka mantau → gutsutsa & gidaje

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

Ba tare da tsaftace ba, bukatun da ya jita a gida iya bayar da amsawa *bayan* sabuwa daya kuma ya rubuta sabon bayanai (yanayin gida), kuma lilita/masu na'a za su taro. Jerin `react-hooks/exhaustive-deps` ESLint yana kama yawancin takaitaccen dogara.