Cilat janë përditësimet optimiste dhe si i implementoni ato në mënyrë të sigurt?

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**.

## Kontrasti

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

## Pse ka rëndësi për UX

Për veprimet me besueshmëri të lartë (pëlqimi i një postimi, kalimi i një todo, dërgimi i një mesazhi në chat), kërkesa pothuajse gjithmonë ka sukses, kështu që prisja për rrugën e kthimit shton vetëm vonësen e vërejtur. Përditësimet optimiste e bëjnë këtë të menjëhershëm.

## Zbatimi i sigurt (rollback-u është kritik)

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

Çelësi për sigurinë: **merrni një pamje të gjendjes të mëparshme para ndryshimit optimist**, dhe rikthejeni atë nëse kërkesa dështon. Anashkalimi i rollback-ut e lë UI-n duke gënjyer për gjendjen e serverit — gabimi i rrezikshëm që përditësimet optimiste mund të prezantojnë.

## Me React Query (suport i integruar)

```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 formalizon modelin: `onMutate` (snapshot + optimistic update), `onError` (rollback), `onSettled` (refetch për të konfirmuar të vërtetën).

## Kur të përdorni / të shmangni

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

## Pse ka rëndësi

Përditësimet optimiste janë një teknikë e fuqishme UX që e bën aplikacionin të menjëhershëm duke mos pritur në rrjet — por ato janë të sigurta vetëm *nëse zbatoni rollback-un (snapshot-then-restore) dhe shfaqni gabimet.

Modeli (snapshot → update → on failure roll back → reconcile) është njohuri thelbësore, dhe të kuptuarit se kur është i përshtatshëm (veprimet që ka gjasa të ketë sukses, me rrezik të ulët) kundrejt atyre të rrezikshme (pagesat) është ajo që ndan një UI të sofistikuar, të besueshëm nga ai që në heshtje keqpërfaqëson gjendjen e serverit.