რა არის useEffect dependency array-ისა და cleanup-ის ჩვეულებრივი პაფალები?

Question

IT Interview Practice · Accepted Answer

Effect კვლავ გაშვება მის **dependencies**-ის საფუძველზე, და ამ array-ს შეცდომა React-ის ბაგების #1 წყარო.

## Pitfall 1: missing dependencies → stale values

Effect იკეტება იმ მნიშვნელობებით, რომლებიც ის render-დან აქვს დაკაპიტურებული. თუ dependency-ს გამოტოვებთ, ის ძველი მნიშვნელობას აგრძელებს გამოყენებას:

```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: ან დაამატეთ `count` deps-ში, ან გამოიყენეთ functional updater, რომელიც ამას არ საჭიროებს (`setCount(c => c + 1)`).

## Pitfall 2: unstable dependencies → effect runs every render

Objects/arrays/functions თითოეულ render-ზე თავიდან იქმნება, ამიტომ ისინი "ახალი" არიან ყოველ ჯერზე და effect არასდროს დასამტკიცდება:

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

Fix: დაეყრდნოს primitive-ს (`[id]`), ან memoize-ირებული იყოს `useMemo`/`useCallback`-ით.

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

Cleanup-ის გარეშე, ნელი წინა request შეიძლება resolve გახდეს *ახალი*-ის შემდეგ და overwrite-ი გაკეთდეს fresh data-ს (race condition), და subscriptions/timers დაგროვდებოდნენ. `react-hooks/exhaustive-deps` ESLint rule უმეტესი missing-dependency შემთხვევებს დაიჭერს.

Pitfall 1: missing dependencies → stale values

Pitfall 2: unstable dependencies → effect runs every render

Pitfall 3: forgotten cleanup → leaks & races

დაკავშირებული კითხვები