Contoh Kasus
Ada contoh kasus, misalkan ada sebuah aplikasi Point of Sales. Aplikasi tersebut memiliki fitur untuk menambah quantity produk di dalam cart. Ketika kasir menambah quantity produk di dalam cart, maka proses yang umum terjadi adalah:
- Sebuah produk di dalam cart memiliki 1 quantity.
- Kasir mengklik tombol "+" yang ada pada produk tersebut.
- Loading akan muncul dan aplikasi akan mengirim request ke server via API untuk menambah 1 quantity pada produk tersebut.
- Jika berhasil, maka server akan mengembalikan response ke aplikasi berupa data produk tersebut beserta quantity terbaru yaitu 2.
- Data tersebut disimpan oleh aplikasi dan akan ditampilkan sebagai produk dengan 2 quantity di dalam cart.
Dalam alur tersebut, dapat kita lihat kalau setiap kali kasir menambahkan quantity produk, maka akan muncul loading saat komunikasi antara aplikasi dengan server terjadi dan hal ini buruk untuk user experience. Pasti akan menjengkelkan kalau setiap kali menambahkan quantity akan muncul loading.
Bagaimana kalau loading tidak perlu dimunculkan saat proses komunikasi aplikasi dengan server terjadi? Hal ini juga buruk untuk user experience karena ketika kasir mengklik tombol "+", quantity produk tidak langsung berubah karena perlu menunggu proses komunikasi antara aplikasi dengan server berhasil terlebih dahulu. Pasti akan menjengkelkan kalau tidak ada feedback yang langsung muncul setiap kali menambahkan quantity.
Peran Optimistic Update
Disinilah peran metode Optimistic Update sebagai solusi untuk mengatasi masalah tersebut. Dengan Optimistic Update, kita menggunakan data palsu untuk ditampilkan ketika proses komunikasi antara aplikasi dengan server terjadi. Lebih jelasnya sebagai berikut:
- Sebuah produk di dalam cart memiliki 1 quantity.
- Kasir mengklik tombol "+" yang ada pada produk tersebut.
- Aplikasi akan mengirim request ke server via API untuk menambah 1 quantity pada produk tersebut.
- Selagi proses komunikasi berlangsung, aplikasi membuat dan menyimpan data palsu berupa produk tersebut dengan 2 quantity dan langsung ditampilkan di dalam cart.
- Saat komunikasi selesai dan berhasil, maka server akan mengembalikan response ke aplikasi berupa data produk tersebut beserta quantity terbaru yaitu 2.
- Data dari response tersebut akan digunakan untuk menggantikan data palsu tadi.
- Namun jika komunikasi selesai dan gagal, maka aplikasi akan mengembalikan kondisi produk tersebut seperti sebelumnya yaitu quantity kembali ke 1.
Dalam alur tersebut bisa kita lihat kalau setiap kali kasir mencoba untuk menambahkan quantity produk, quantity terbaru akan langsung tampil di dalam cart tanpa perlu menampilkan loading walaupun proses komunikasi antara aplikasi dengan server sedang berjalan. Kalaupun proses tambah quantity di server gagal, nilai quantity pun akan kembali seperti sebelumnya. Hal ini membuat user experience menjadi lebih terkesan responsif.
Kesimpulan
Optimistic Update dapat menjadi solusi untuk user experience yang lebih responsif saat berhadapan dengan proses tukar data antara aplikasi dengan server. Memang metode ini kelihatannya cukup sulit untuk diterapkan. Namun dengan bantuan React Query, metode ini bisa menjadi lebih mudah untuk diterapkan. React Query sendiri adalah sebuah library yang diperuntukan untuk melakukan data-fetching di environment React dan memiliki fitur untuk penerapan Optimistic Update.