Τι είναι τα αισιόδοξα ενημερώσεις και πώς τα εφαρμόζεις με ασφάλεια;

Question

Accepted Answer

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

## Η αντίθεση

```text
Pessimistic (normal): click → show spinner → wait for server → THEN update UI (feels slow)
Optimistic:           click → update UI INSTANTLY → send request →
                      if it fails, ROLL BACK the change (feels instant)
```

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

Για ενέργειες με υψηλή βεβαιότητα (αρέσει σε μια ανάρτηση, εναλλαγή μιας εργασίας, αποστολή μηνύματος συνομιλίας), το αίτημα σχεδόν πάντα επιτυχαίνει, γι' αυτό το αναμένοντας το round-trip προσθέτει απλώς την αντιληπτή καθυστέρηση. Οι αισιόδοξες ενημερώσεις κάνουν αυτές τις ενέργειες να αισθάνονται άμεσες.

## Εφαρμογή του με ασφάλεια (η επαναφορά είναι κρίσιμη)

```jsx
async function toggleLike(post) {
  const previous = post.liked;                 // 1. SNAPSHOT the old state for rollback
  setPost({ ...post, liked: !post.liked });    // 2. update UI optimistically

try {
    await api.toggleLike(post.id);             // 3. fire the request
  } catch (err) {
    setPost({ ...post, liked: previous });     // 4. ROLL BACK on failure
    showError("Couldn't update — please retry"); // 5. tell the user
  }
}
```

Το κλειδί για την ασφάλεια: **snapshot την προηγούμενη κατάσταση πριν την αισιόδοξη αλλαγή** και την επαναφορά εάν το αίτημα αποτύχει. Η παράλειψη της επαναφοράς αφήνει το UI να ψεύδεται σχετικά με την κατάσταση του διακομιστή — το επικίνδυνο σφάλμα που μπορούν να εισάγουν οι αισιόδοξες ενημερώσεις.

## Με React Query (ενσωματωμένη υποστήριξη)

```jsx
useMutation({
  mutationFn: toggleLike,
  onMutate: async (newData) => {
    await queryClient.cancelQueries({ queryKey: ["post"] });
    const previous = queryClient.getQueryData(["post"]); // snapshot
    queryClient.setQueryData(["post"], newData);          // optimistic update
    return { previous };                                   // pass snapshot to onError
  },
  onError: (err, vars, context) => {
    queryClient.setQueryData(["post"], context.previous);  // rollback
  },
  onSettled: () => queryClient.invalidateQueries({ queryKey: ["post"] }), // reconcile with server
});
```

Το React Query επισημοποιεί το πρότυπο: `onMutate` (snapshot + αισιόδοξη ενημέρωση), `onError` (επαναφορά), `onSettled` (ανάκτηση για επιβεβαίωση της αλήθειας).

## Πότε να χρησιμοποιήσεις / αποφύγεις

```text
✓ Use: high-success, low-stakes actions (likes, toggles, reorder, chat)
✗ Avoid: critical/uncertain operations (payments, irreversible actions) — wait for confirmation
```

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

Οι αισιόδοξες ενημερώσεις είναι μια ισχυρή τεχνική UX που κάνει τις εφαρμογές να φαίνονται άμεσες δεν περιμένουν το δίκτυο — αλλά είναι *ασφαλείς* μόνο εάν εφαρμόσεις επαναφορά (snapshot-then-restore) και εμφάνιση σφαλμάτων.

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