Cosa sono gli aggiornamenti ottimistici e come implementarli in sicurezza?

Question

Accepted Answer

Un **aggiornamento ottimistico** aggiorna l'interfaccia **immediatamente**, *presumendo* che una richiesta al server avrà successo, invece di aspettare la risposta. Questo rende l'app istantanea — ma devi gestire il caso in cui la richiesta fallisca effettivamente eseguendo un **rollback**.

## Il contrasto

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

## Perché è importante

Per azioni ad alta confidenza (mettere mi piace a un post, attivare/disattivare un todo, inviare un messaggio di chat), la richiesta quasi sempre ha successo, quindi aspettare il round-trip aggiunge solo ritardo percepito. Gli aggiornamenti ottimistici li rendono istantanei.

## Implementarli in sicurezza (il rollback è critico)

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

La chiave per la sicurezza: **fare uno snapshot dello stato precedente prima del cambio ottimistico** e ripristinarlo se la richiesta fallisce. Saltare il rollback lascia l'interfaccia che mente sullo stato del server — il bug pericoloso che gli aggiornamenti ottimistici possono introdurre.

## Con React Query (supporto integrato)

```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 formalizza il pattern: `onMutate` (snapshot + aggiornamento ottimistico), `onError` (rollback), `onSettled` (refetch per confermare la verità).

## Quando usare / evitare

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

## Perché è importante

Gli aggiornamenti ottimistici sono una tecnica UX potente che rende le app istantanee non aspettando la rete — ma sono *sicuri* solo se implementi il rollback (snapshot-then-restore) e mostri gli errori.

Il pattern (snapshot → aggiornamento → al fallimento esegui rollback → riconciliazione) è una conoscenza essenziale, e capire quando è appropriato (azioni con alta probabilità di successo, basso rischio) versus pericoloso (pagamenti) è quello che distingue un'interfaccia raffinata e affidabile da una che rappresenta silenziosamente male lo stato del server.