Apakah optimistic update dan bagaimana anda melaksanakannya dengan selamat?

Question

Accepted Answer

Sebuah **optimistic update** mengemas kini UI **dengan serta-merta**, *dengan andaian* permintaan pelayan akan berjaya, bukannya menunggu respons. Ini menjadikan aplikasi terasa segera — tetapi anda mesti mengendalikan kes di mana permintaan itu sebenarnya gagal dengan **rollback**.

## Perbandingannya

```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 ia penting untuk UX

Bagi tindakan berkeyakinan tinggi (menyukai catatan, menogol todo, menghantar mesej sembang), permintaan hampir selalu berjaya, jadi menunggu pusingan pergi-balik hanya menambah jeda yang dirasakan. Optimistic update menjadikan tindakan ini terasa segera.

## Melaksanakannya dengan selamat (rollback adalah kritikal)

```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 kepada keselamatan: **ambil snapshot state sebelumnya sebelum perubahan optimistik**, dan pulihkannya jika permintaan gagal. Melangkau rollback membiarkan UI menipu tentang state pelayan — pepijat berbahaya yang boleh diperkenalkan oleh optimistic update.

## Dengan React Query (sokongan terbina)

```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 corak ini: `onMutate` (snapshot + optimistic update), `onError` (rollback), `onSettled` (refetch untuk mengesahkan kebenaran).

## Bila hendak guna / elak

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

## Mengapa ia penting

Optimistic update ialah teknik UX yang berkuasa yang menjadikan aplikasi terasa segera dengan tidak menunggu rangkaian — tetapi ia hanya *selamat* jika anda melaksanakan rollback (snapshot-kemudian-pulih) dan mendedahkan ralat.

Corak ini (snapshot → kemas kini → jika gagal rollback → selaraskan) ialah pengetahuan yang penting, dan memahami bila ia sesuai (tindakan yang berkemungkinan berjaya, berisiko rendah) berbanding berbahaya (pembayaran) ialah apa yang membezakan UI yang digilap dan boleh dipercayai daripada yang secara senyap memesongkan state pelayan.