Τι είναι παράγωγη κατάσταση και γιατί να αποφύγετε την αναπαραγωγή της;

Question

Accepted Answer

**Παράγωγη κατάσταση** είναι οποιαδήποτε τιμή που μπορείς να **υπολογίσεις από την υπάρχουσα κατάσταση** παρά να την αποθηκεύσεις ξεχωριστά. Η αρχή: αν μπορείς να το υπολογίσεις, μην το αποθηκεύσεις — παράγαγέ το σε κάθε απόδοση. Η αποθήκευση παραγωγίσιμων τιμών προσκαλεί τη αποσυγχρονισμό.

## Το αντιπρότυπο: αποθήκευση αυτού που μπορείς να υπολογίσεις

```jsx
// ❌ storing a derived value as separate state
function Cart() {
  const [items, setItems] = useState([]);
  const [total, setTotal] = useState(0); // DUPLICATE — derivable from items

function addItem(item) {
    setItems([...items, item]);
    setTotal(total + item.price); // must remember to update total too — easy to forget 🐛
  }
}
```

Τώρα το `total` είναι ένα δεύτερο αντίγραφο πληροφοριών που υπάρχουν ήδη στα `items`. Κάθε αλλαγή στα `items` πρέπει *επίσης* να ενημερώσει το `total`, και τη στιγμή που χάσεις ένα (αφαίρεση, αλλαγή ποσότητας), διαφωνούν και το UI εμφανίζει το λάθος σύνολο.

## Η λύση: παράγαγέ το στην απόδοση

```jsx
// ✅ compute total from items — always correct, never out of sync
function Cart() {
  const [items, setItems] = useState([]);
  const total = items.reduce((sum, i) => sum + i.price, 0); // derived each render

function addItem(item) {
    setItems([...items, item]); // ONE update; total recomputes automatically
  }
}
```

Με το `total` παραγόμενο, δεν υπάρχει τίποτα άλλο να κρατήσεις σε συγχρονισμό — αλλάξε τα `items` και το σύνολο είναι πάντα σωστό.

## Απομνημόνευση μόνο εάν ο υπολογισμός είναι ακριβός

```jsx
const sortedFiltered = useMemo(
  () => items.filter(i => i.active).sort(compareFn), // expensive derivation
  [items]                                            // recompute only when items change
);
```

Για βαριές παραγωγές (μεγάλα φίλτρα/ταξινομήσεις), `useMemo`/`computed`/selectors αποθηκεύουν τα αποτελέσματα ώστε να υπολογίζονται μόνο όταν αλλάζουν οι εξαρτήσεις — αλλά είναι ακόμα *παράγωγη*, όχι αποθηκευμένη ως ανεξάρτητη κατάσταση.

## Κοινές παράγωγες τιμές

```text
Totals/counts, filtered or sorted lists, fullName from first+last,
isValid from form fields, formatted/displayed strings, "is everything selected?"
```

## Γιατί έχει σημασία

Η μη αναπαραγωγή παράγωγης κατάστασης είναι άμεση εφαρμογή της ενιαίας πηγής αλήθειας — εξαλείφει μια ολόκληρη κλάση σφαλμάτων όπου τα αντίγραφα απομακρύνονται.

Ο κανόνας "παράγαγε, μη αποθηκεύσεις" διατηρεί την κατάστασή σου ελάχιστη και το UI σου συνεπές κατά κατασκευή.

Το να αναγνωρίζεις τι είναι παραγωγίσιμο (και να φτάνεις σε `useMemo`/computed/selectors μόνο για απόδοση, ποτέ για να δημιουργήσεις δεύτερη πηγή αλήθειας) είναι χαρακτηριστικό καθαρού, ανθεκτικού στα σφάλματα σχεδιασμού κατάστασης.