Γιατί είναι σημαντική η αμετάβλητη κατάσταση στη διαχείριση κατάστασης;

Question

IT Interview Practice · Accepted Answer

**Αμετάβλητη κατάσταση** (immutability) σημαίνει ότι δεν τροποποιείτε ποτέ την κατάσταση στη θέση της — αντ' αυτού, δημιουργείτε ένα **νέο** αντικείμενο/πίνακα με τις αλλαγές. Αυτό είναι κεντρικό για τον τρόπο που τα React, Redux και παρόμοια εργαλεία ανιχνεύουν αλλαγές και ενημερώνουν σωστά το UI.

## Το πρόβλημα με την τροποποίηση

```jsx
// ❌ mutating — React doesn't detect the change
function addItem(item) {
  items.push(item);   // same array reference → React sees "no change" → no re-render
  setItems(items);    // passing the same reference back
}

// ✅ immutable — a NEW array, new reference → React re-renders
function addItem(item) {
  setItems([...items, item]); // create a new array
}
```

Τα React (και Redux) ανιχνεύουν αλλαγές συγκρίνοντας **αναφορές** (`oldState === newState`), όχι βάθη περιεχόμενο — για λόγους απόδοσης. Εάν τροποποιήσετε στη θέση της, η αναφορά παραμένει ίδια, επομένως το πλαίσιο νομίζει ότι τίποτα δεν άλλαξε και παραλείπει το re-render.

## Μοτίβα ενημέρωσης με αμετάβλητη κατάσταση

```js
// arrays
setItems([...items, newItem]);                  // add
setItems(items.filter(i => i.id !== id));        // remove
setItems(items.map(i => i.id === id ? { ...i, done: true } : i)); // update one

// objects
setUser({ ...user, name: "Bob" });               // update a field
setUser({ ...user, address: { ...user.address, city: "NY" } }); // nested update
```

Ο τελεστής spread δημιουργεί ρηχά αντίγραφα· για ένθετα δεδομένα αντιγράφετε κάθε επίπεδο που αλλάζετε.

## Γιατί η αμετάβλητη κατάσταση φέρνει περισσότερα οφέλη

```text
✓ Reliable change detection → correct, efficient re-renders (reference equality)
✓ Enables performance optimizations (React.memo, OnPush, useMemo) that compare references
✓ Predictable state — old state is never altered, easing debugging
✓ Time-travel debugging & undo/redo (keep past state snapshots)
```

## Εργαλεία που βοηθούν

```js
// Immer (used by Redux Toolkit) lets you "mutate" a draft → produces an immutable result
produce(state, draft => { draft.items.push(item); }); // safe + readable
```

Το Immer κάνει τις ένθετες αμετάβλητες ενημερώσεις ergonomic επιτρέποντάς σας να γράψετε κώδικα που μοιάζει με τροποποίηση σε ένα σχέδιο που το μετατρέπει σε μια αμετάβλητη ενημέρωση.

## Γιατί είναι σημαντικό

Η αμετάβλητη κατάσταση είναι ο μηχανισμός που κάνει τη ανίχνευση αλλαγών που βασίζεται στις αναφορές να λειτουργεί — είναι ο *λόγος* που `[...items]` ενεργοποιεί ένα re-render αλλά `items.push()` όχι.

Πέρα από την ορθότητα, ξεκλειδώνει βελτιστοποιήσεις απόδοσης (η memoization συγκρίνει αναφορές) και ισχυρές δυνατότητες (undo/redo, time-travel).

Η κατανόηση των μοτίβων ενημέρωσης με αμετάβλητη κατάσταση (και εργαλείων όπως το Immer) είναι απαραίτητη για τη σωστή εργασία με React/Redux· η τροποποίηση κατάστασης είναι ένα από τα πιο συνηθισμένα λάθη αρχαρίων.

Το πρόβλημα με την τροποποίηση

Μοτίβα ενημέρωσης με αμετάβλητη κατάσταση

Γιατί η αμετάβλητη κατάσταση φέρνει περισσότερα οφέλη

Εργαλεία που βοηθούν

Γιατί είναι σημαντικό

Σχετικές ερωτήσεις