Apa iku optimistic updates lan kepiye carane nglaksanakake kanthi aman?

Question

Accepted Answer

Optimistic update nganyari UI **langsung**, *nganggep* manawa request server bakal sukses, tinimbang nunggu respon. Iki nggawe aplikasi terasa instan — nanging sampeyan kudu nangani kasuse nalika request bener-bener gagal kanthi **rollback**.

## Perbandingane

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

## Apa pentinge kanggo UX

Kanggo aksi kanthi keyakinan tinggi (suka posting, toggle todo, ngirim pesan chat), request meh siji waé sukses, dadi nunggu round-trip mung nambah perceived lag. Optimistic updates nggawe iki terasa langsung.

## Nglaksanakake kanthi aman (rollback iku kritis)

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

Kunci keamanan: **snapshot status sadurunge perubahan optimistic**, lan balekake yen request gagal. Nglirwakake rollback ngandonake UI ngapusi babagan server state — bug ndilate optimistic updates bisa ngenalake.

## Karo React Query (dukungan built-in)

```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 formalisir pola: `onMutate` (snapshot + optimistic update), `onError` (rollback), `onSettled` (refetch kanggo komfirmasi kebenaran).

## Kapan kudu digunakake / dihindari

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

## Mengapa iki penting

Optimistic updates minangka teknik UX kang kuwat nang-gawe aplikasi terasa instan kanthi ora nunggu jaringan — nanging mung *aman* yen sampeyan nglaksanakake rollback (snapshot-then-restore) lan nampilake errors.

Pola (snapshot → update → on failure roll back → reconcile) iku pengetahuan essential, lan mangerti kapan iku appropriate (aksi lancar-sukses, low-stakes) versus ndilate (pembayaran) iku sing mbedakake UI polished, terpercaya saka sing ngapusi server state dhewe-dhewe.