Apa itu pembaruan optimis dan bagaimana Anda mengimplementasikannya dengan aman?

Question

Accepted Answer

Sebuah **pembaruan optimis** memperbarui UI **segera**, *mengasumsikan* bahwa permintaan server akan berhasil, daripada menunggu respons. Ini membuat aplikasi terasa instan — tetapi Anda harus menangani kasus di mana permintaan sebenarnya gagal dengan **kembali**.

## Kontrasnya

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

## Mengapa ini penting untuk UX

Untuk tindakan yang sangat yakin (menyukai postingan, mengalihkan todo, mengirim pesan obrolan), permintaan hampir selalu berhasil, jadi menunggu perjalanan pulang-pergi hanya menambah lag yang dirasakan. Pembaruan optimis membuat ini terasa instan.

## Mengimplementasikannya dengan aman (rollback sangat penting)

```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: **ambil snapshot dari status sebelumnya sebelum perubahan optimis**, dan pulihkan jika permintaan gagal. Melewatkan rollback membiarkan UI berbohong tentang status server — bug berbahaya yang dapat diperkenalkan pembaruan optimis.

## Dengan React Query (dukungan bawaan)

```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 memformalkan pola: `onMutate` (snapshot + pembaruan optimis), `onError` (rollback), `onSettled` (refetch untuk mengonfirmasi kebenaran).

## Kapan menggunakan / menghindari

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

## Mengapa ini penting

Pembaruan optimis adalah teknik UX yang ampuh yang membuat aplikasi terasa instan tanpa menunggu jaringan — tetapi mereka hanya *aman* jika Anda mengimplementasikan rollback (snapshot-kemudian-pulihkan) dan menampilkan kesalahan.

Pola (snapshot → update → jika gagal rollback → rekonsiliasi) adalah pengetahuan penting, dan memahami kapan itu tepat (tindakan yang mungkin berhasil, berisiko rendah) versus berbahaya (pembayaran) adalah apa yang membedakan UI yang halus dan dapat dipercaya dari satu yang secara diam-diam salah merepresentasikan status server.