Što su optimistični ažuriranja i kako ih sigurno implementirati?

Question

Accepted Answer

**Optimistično ažuriranje** ažurira UI **odmah**, *pretpostavljajući* da će zahtjev serveru uspjeti, umjesto čekanja na odgovor. To čini aplikaciju momentalnom — ali morate se nositi sa slučajem gdje zahtjev zapravo ne uspe **vraćanjem unazad**.

## Kontrast

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

## Zašto je to bitno za UX

Za visoko pouzdane akcije (lajkovanje posta, prebacivanje todo stavke, slanje chat poruke), zahtjev gotovo uvijek uspijeva, tako da čekanje na povratnu putanju samo dodaje percipiranu kašnjenja. Optimistična ažuriranja čine ove akcije trenutnim.

## Sigurna implementacija (vraćanje je kritično)

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

Ključ sigurnosti: **snimite prethodno stanje prije optimistične promjene**, i vratite ga ako zahtjev neće uspjeti. Preskakanje vraćanja ostavlja UI da laže o stanju servera — opasnu grešku koju optimistična ažuriranja mogu unijeti.

## S React Query (ugrađena podrška)

```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 formalizira uzorak: `onMutate` (snimak + optimistično ažuriranje), `onError` (vraćanje), `onSettled` (ponovno dohvaćanje za potvrdu istine).

## Kada koristiti / izbjeći

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

## Zašto je to bitno

Optimistična ažuriranja su moćna UX tehnika koja čini aplikacije trenutnim bez čekanja na mrežu — ali su sigurna samo ako implementirate vraćanje (snimak-pa-vraćanje) i prikazujete greške.

Uzorak (snimak → ažuriranje → ako je neuspješna vraćanje → pomirenje) je bitna znanja, a razumijevanje kada je prikladno (vjerojatno će uspjeti, akcije niskih rizika) nasuprot opasnim (plaćanja) je ono što odvaja ispravan, pouzdan UI od onog koji tiho pogrešno predstavlja stanje servera.