Τι είναι το useEffect και πότε εκτελείται;

Question

Accepted Answer

`useEffect` εκτελεί **παρενέργειες** — έργο που επεκτείνεται πέρα από την απόδοση του React, όπως ανάκτηση δεδομένων, συνδρομές, χρονόμετρα ή ручные ενημερώσεις DOM. Εκτελείται **μετά** την απόδοση του στοιχείου, διατηρώντας τις παρενέργειες έξω από το σώμα απόδοσης (η απόδοση πρέπει να παραμείνει καθαρή).

## Ο πίνακας εξάρτησης ελέγχει τον χρονισμό

```jsx
useEffect(() => {
  document.title = `Count: ${count}`;
}, [count]); // ← dependency array
```

- **`[count]`** → εκτελείται μετά την πρώτη απόδοση και όποτε αλλάξει το `count`.
- **`[]`** (κενό) → εκτελείται **μία φορά** μετά το mount (καλό για ενιαία ρύθμιση).
- **παραλειφθέν** → εκτελείται μετά από **κάθε** απόδοση (σπάνια αυτό που θέλετε).

## Καθαρισμός: επιστρέψτε μια συνάρτηση

Αν ένα αποτέλεσμα ρυθμίζει κάτι που χρειάζεται απόσυρση, επιστρέψτε μια συνάρτηση καθαρισμού. Το React την καλεί πριν από την επόμενη εκτέλεση αποτελέσματος και όταν το στοιχείο αποσυναρμολογείται:

```jsx
useEffect(() => {
  const id = setInterval(() => setN(n => n + 1), 1000);
  return () => clearInterval(id); // cleanup → prevents a leaked timer
}, []);
```

## Γιατί το καθάρισμα έχει σημασία

Χωρίς αυτό, κάθε επανεκτέλεση θα προσέθετε ένα ακόμη χρονόμετρο/συνδρομή και δεν θα αφαίρεσε το παλιό — μια κλασική διαρροή μνήμης. Ο κύκλος ζωής για ένα αποτέλεσμα `[dep]` είναι: *εκτέλεση αποτελέσματος → (αλλαγή dep) → εκτέλεση καθαρισμού → εκτέλεση αποτελέσματος ξανά*.

**Συμβουλή:** μη χρησιμοποιείτε αποτελέσματα για πράγματα που μπορείτε να υπολογίσετε κατά την απόδοση (αντ' αυτού, παράγουν τιμές), και συμπεριλάβετε κάθε τιμή που διαβάζει το αποτέλεσμα στον πίνακα εξάρτησης (ο κανόνας lint `react-hooks/exhaustive-deps` βοηθά).