Ποιες είναι οι κοινές παγίδες με το useEffect dependency array και το cleanup;

Question

Accepted Answer

Ένα effect εκτελείται ξανά με βάση τις **εξαρτήσεις** του, και η εσφαλμένη χρήση αυτού του πίνακα είναι η #1 πηγή σφαλμάτων στο React.

## Σημασία αυτού

### Παγίδα 1: λείπουσες εξαρτήσεις → παλιές τιμές

Ένα effect κλείνει πάνω στις τιμές από το render στο οποίο δημιουργήθηκε. Εάν παραλείψετε μια εξάρτηση, συνεχίζει να χρησιμοποιεί μια παλιά:

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

Λύση: Προσθέστε `count` στα deps, ή χρησιμοποιήστε έναν συναρτησιακό updater που δεν το χρειάζεται (`setCount(c => c + 1)`).

### Παγίδα 2: ασταθείς εξαρτήσεις → το effect τρέχει σε κάθε render

Τα αντικείμενα/πίνακες/συναρτήσεις δημιουργούνται ξανά σε κάθε render, οπότε είναι "νέα" κάθε φορά και το effect δεν σταθεροποιείται ποτέ:

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

Λύση: Εξαρτάται από το πρωτόγονο (`[id]`), ή memoize με `useMemo`/`useCallback`.

### Παγίδα 3: ξεχασμένο cleanup → διαρροές και race conditions

```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, ένα αργό παλιότερο αίτημα θα μπορούσε να επιλυθεί *μετά* από ένα νεότερο και να αντικαταστήσει φρέσκα δεδομένα (μια race condition), και οι συνδρομές/timers θα συσσωρεύονταν. Ο κανόνας ESLint `react-hooks/exhaustive-deps` αποτρέπει τις περισσότερες περιπτώσεις χαμένων εξαρτήσεων.