logo

Improving User Experience with Optimistic Updates

In this post, I'll share some thoughts about improving user experience/interactivity for your app with one simple technique called Optimistic Updates.


In simple words, Optimistic Updates is updating the UI depending on the optimistic response without waiting for the actual response from the server that may return with an error.


Let's go with an example that demonstrates the goal of that and how can we implement it.

The Like button on Twitter

Imagine that you could be assigned a task to implement a like feature on user tweets, The task is when someone clicked on the like icon, you should make an HTTP request to the server to add it to users' likes, also do a UI change to make this icon active. Keep in mind that the request may fail (ex. user deleted it, your session is expired,...etc).


The slow way to implement this feature is first doing the request, waiting for the response, then update the UI based on the response. Why when the user clicked on the like icon he expects that he liked the tweet and everything has gone well, but the UI hasn't reflected that there's a lag between the user clicks and the HTTP response. This lag could be solved by the Optimistic Update.


In the Optimistic Update solution, we'll update the UI directly based on the optimistic response based on user input, and make the HTTP call, then when the response gives us everything is ok, then no extra work from our side, otherwise, we'll roll back the UI change to the state before the user clicks.


Check out the behavior here from Apollo GrahpQL Client Docs, you'll notice the adding item to the list displayed it directly before the app get a response, while editing a list item is not doing the same.


What if the user clicks on a button multiple times in a use case like medium.com clap button?


We can do the Optimistic Update as well, but we can add a debounce functionality to it.


Debounce means calling a function but after waiting some time until the user finishes his interactivity. The benefit here is doing as minimum as possible of HTTP requests, we just send the final user clicks to the backend but keep the UI updated with the optimistic value.


In conclusion, Optimistic Updates can greatly improve the user experience of your app by reducing lag and increasing interactivity. By implementing this simple technique, you can update the UI instantly based on user input, without waiting for a response from the server. This can help your app feel more responsive and increase user engagement. Additionally, adding a debounce functionality can reduce the number of HTTP requests and make your app even more efficient. So next time you're working on an interactive feature for your app, consider implementing optimistic updates to take your user experience to the next level.


Resources:

Published it on hashnode and medium.com