Ce sunt actualizările optimiste și cum le implementezi în siguranță?

Question

Accepted Answer

O **actualizare optimistă** actualizează interfața utilizatorului **imediat**, *presupunând* că o cerere către server va reușit, în loc să aștepți răspunsul. Aceasta face aplicația să se simtă instantanee — dar trebuie să gestionezi cazul în care cererea de fapt eșuează prin **revenirea la starea anterioară**.

## Contrastul

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

## De ce este important pentru experiența utilizatorului

Pentru acțiuni cu grad ridicat de încredere (like-ul unui post, comutarea unei sarcini, trimiterea unui mesaj chat), cererea reușește aproape întotdeauna, deci așteptarea pentru round-trip adaugă doar lag perceput. Actualizările optimiste fac aceste acțiuni să se simtă imediate.

## Implementarea sigură (revenirea la starea anterioară este critică)

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

Cheia securității: **realizează o copie a stării anterioare înainte de schimbarea optimistă**, și restaur-o dacă cererea eșuează. Omiterea revenerii la starea anterioară lasă interfața utilizatorului să mințească despre starea pe server — bug-ul periculos pe care actualizările optimiste îl pot introduce.

## Cu React Query (suport încorporat)

```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 formalizează modelul: `onMutate` (copie + actualizare optimistă), `onError` (revenire la starea anterioară), `onSettled` (refetch pentru a confirma realitatea).

## Când să folosești / evita

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

## De ce este important

Actualizările optimiste sunt o tehnică UX puternică care face ca aplicațiile să se simtă instantanee prin a nu aștepta rețeaua — dar sunt doar *sigure* dacă implementezi revenirea la starea anterioară (copie-apoi-restaurare) și prezinți erorile.

Modelul (copie → actualizare → la eșec revenire la starea anterioară → reconciliere) este cunoștințe esențiale, și înțelegerea când este potrivit (acțiuni probabile de reușit, cu miza joasă) versus periculos (plăți) este ceea ce deosebește o interfață polizată și de încredere de una care tace misreprezintând starea pe server.