Posuni za optimistic updates ni nini na unawezaje kuzitekeleza kwa usalama?

Question

Accepted Answer

An **optimistic update** updates the UI **immediately**, *assuming* a server request will succeed, instead of waiting for the response. This makes the app feel instant — but you must handle the case where the request actually fails by **rolling back**.

## Tofautiano

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

## Kwa nini kumuhimu kwa UX

Kwa vitendo vya uhakika wa juu (kupenda chapisho, kubadilisha todo, kutuma ujumbe wa chat), ombi karibu kila wakati linafaulu, kwa hivyo kusubiri kwenye njia ya kurudi kunaongeza tu kuchelewa kuonekana. Posuni za optimistic zifanya hizi kuwa mara moja.

## Kutekeleza kwa usalama (rollback ni muhimu)

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

Mfungamano wa usalama: **kamata hali ya awali kabla ya mabadiliko ya optimistic**, na irudishe kama ombi lilishindwa. Kuacha rollback humwacha UI inasema uongo kuhusu hali ya server — kosa la hatari ambalo posuni za optimistic zinaweza kuletwa.

## Kwa React Query (msaada wa ndani)

```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 inakamatia muundo: `onMutate` (snapshot + optimistic update), `onError` (rollback), `onSettled` (refetch kupatia kamatanisha kweli).

## Lini kutumia / kuepuka

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

## Kwa nini kumuhimu

Posuni za optimistic ni mbinu yenye nguvu ya UX inayofanya matumizi kuwa mara moja kwa kutokusubiri kwenye mtandao — lakini kwa usalama tu *kama* utekeleza rollback (snapshot-then-restore) na kuonyesha hitilafu.

Muundo (snapshot → update → on failure roll back → reconcile) ni ujuzi wa muhimu, na kuelewa lini inafaa (vitendo vya uwezekano wa juu wa kufaulu, hatari ndogo) dhidi ya hatari (malipo) ndio kinachogawanya UI mwenyefu, imenidhani kutoka kwa moja inayoumbua hali ya server kwa kimya.