Mik az optimista frissítések, és hogyan valósítja meg őket biztonságosan?

Question

Accepted Answer

Az **optimista frissítés** azonnal frissíti az UI-t, *feltételezve*, hogy a szerver kérés sikeres lesz, ahelyett, hogy megvárná a választ. Ez pillanatnyinak érzi magát az alkalmazást — de kezelnie kell azt az esetet, amikor a kérés valójában meghiúsul a **visszagörgetésgeserős** által.

## A kontraszt

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

## Miért fontos az UX számára

A magas megbízhatóságú műveleteknél (bejegyzés kedvelése, todo váltása, csevegési üzenet küldése) a kérés szinte mindig sikeres, így az oda-vissza utat megvárni csak az érzékelt késedelmet adja. Az optimista frissítések pillanatnyivá teszik ezeket.

## Biztonságos megvalósítás (a visszagörgetés kritikus)

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

A biztonság kulcsa: **pillanatkép az optimista módosítás előtti előző állapotról**, és állítsa vissza, ha a kérés meghiúsul. A visszagörgetés kihagyása hagyja az UI-t hazudni a szerver állapotáról — a veszélyes hiba, amit az optimista frissítések bevezethetnek.

## A React Query-vel (beépített támogatás)

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

A React Query formalizálja a mintát: `onMutate` (pillanatkép + optimista frissítés), `onError` (visszagörgetés), `onSettled` (újra lekérdezés az igazság megerősítéséhez).

## Mikor használjon / kerüljön

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

## Miért fontos

Az optimista frissítések egy hatékony UX technika, amely pillanatnyivá teszi az alkalmazásokat anélkül, hogy a hálózatra várnának — de csak akkor biztonságosak, ha megvalósítja a visszagörgetést (pillanatkép-majd-visszaállít) és megjeleníti a hibákat.

A minta (pillanatkép → frissítés → hiba esetén visszagörgetés → egyeztetés) alapvető tudás, és annak megértése, hogy mikor megfelelő (valószínűleg sikeres, alacsony kockázatú műveletek) és veszélyes (kifizetések) az, ami megkülönbözteti a csiszolt, megbízható UI-t attól, amelyik csendesen félrereprezentálja a szerver állapotát.