Case
There is a case, let say there is an Point of Sales app. It has feature to add product quantity in the cart. When cashier add product quantity in the cart, there is a common flow like this:
- There is a product in the cart with 1 quantity.
- Cashier click "+" button in that product.
- Loading appears and app will send a request to the server via API for adding 1 quantity for that product.
- If successful, then the server will return a response to the app in the form of product data with updated quantity that is 2.
- That data saved by the app and will be shown as a product with 2 quantity in the cart.
In that flow, we can see if every time cashier adding product quantity, then loading will appears when communication between the app and the server happens and this is bad user experience. This must be annoying if every time adding quantity then loading appears.
Then how about to not show the loading when communication between the app and the server happens? This is also bad user experience because when cashier click the "+" button, product quantity will not updated immediately because need to wait for communication between the app and the server successfully done first. This must be annoying if there is no feedback that immediately appears every time when adding quantity.
The Role of Optimistic Update
This is the role of Optimistic Update method as a solution of that problem. With optimistic update, we use fake data to show while communication between the app and the server happens. More details as below:
- There is a product in the cart with 1 quantity.
- Cashier click "+" button in that product.
- App will send a request to the server via API for adding 1 quantity for that product.
- While the communication process takes place, app will create and save fake data in the form of that product with 2 quantity and shown immediately in the cart.
- When communication done successfully, then the server will return a response to the app in the form of product data with updated quantity that is 2.
- Data from that response will be used to replace fake data that we talk earlier.
- But if the communication done but failed, then the app will revert the condition of that product that is quantity will going back to 1.
In that flow, we can see if the updated quantity shown immediately in the cart without the needs to show loading even though the communication process between the app and the server still run. Even though the adding quantity process is failed in the server, quantity value will revert back as before. This makes the user experience become more responsive.
Conclusion
Optimistic Update can become a solution for better user experience when dealing with data exchange process between the app and the server. Well this method is looks so hard to implement. But with the help of React Query, this method will be easier to implement. React Query itself is a library that used for doing data-fetching in the React environment and have a feature to implement Optimistic Update.