Optimistic UI: Trik Membuat Website Terasa 10x Lebih Cepat

Menipu Otak Pengunjung Demi Kenyamanan

Coba ingat-ingat saat kamu memencet tombol Like di Twitter atau Instagram. Saat jari menekan layar, ikon hati tersebut SEKETIKA berubah menjadi merah tanpa ada loading spinner berputar. Padahal, secara logika pemrograman, Request API untuk meng-update database Like ke server Amerika butuh waktu sekitar 300 milidetik (0.3 detik).

Mengapa tidak ada loading? Karena *developer* raksasa tersebut menggunakan teknik manipulasi UX (User Experience) yang disebut Optimistic UI (Pembaruan Optimistis).

Cara Kerja Pemrograman Tradisional (Pessimistic)

Kebanyakan Junior Developer merancang antarmuka secara pesimistis:

1. User klik tombol "Like".
2. Frontend menampilkan ikon Loading Berputar.
3. Frontend mengirim tembakan API POST /likes ke server.
4. Menunggu setengah detik. Server menjawab: "Status 200 OK".
5. Frontend menyembunyikan Loading, barulah mengubah warna tombol menjadi merah.

Pendekatan ini sangat lambat dan membuat aplikasi terasa kaku serta berat.

Cara Kerja Optimistic UI (Bohong Demi Kebaikan)

Di pendekatan Optimistic, Frontend sangat optimis (Yakin 100%) bahwa API server pasti akan berhasil. Jadi, alurnya diubah menjadi seperti ini:

1. User klik tombol "Like".
2. DETIK ITU JUGA, Frontend langsung mengubah State tombol menjadi merah! Mata *user* melihat respons instan nol milidetik. User senang.
3. Di belakang layar (secara diam-diam), Frontend baru mengirim API POST /likes ke Server.

Lalu Bagaimana Jika API-nya Error?

Tentu saja, bisa jadi internet *user* sedang putus dan API dari *server* membalas dengan Error 500. Dalam kasus ini, Frontend harus menerapkan fitur Rollback (Putar Balik).

Saat *error* terdeteksi di latar belakang, Frontend akan diam-diam mengubah kembali ikon hati yang merah tadi menjadi putih (seperti semula), lalu memunculkan notifikasi Toast kecil di bawah layar: "Gagal menyukai postingan, periksa koneksi internet Anda."

Kesimpulan di React

Jika kamu menggunakan React, kamu bisa menerapkan ini secara manual menggunakan useState. Namun, *library* modern penarik data seperti React Query, SWR, atau Apollo GraphQL sudah memiliki fitur Optimistic Updates bawaan. Terapkan teknik ini pada aksi-aksi ringan seperti Like, Bookmark, atau Add to Cart, dan saksikan aplikasimu terasa seperti aplikasi Native iOS kelas dunia!