Member-only story
Better UX With Optimistic UI
What is Optimistic UI? And how can you use it to achieve a better user experience (UX)?
Optimistic Update is to simulate the result of an asynchronous action and update the UI before the action is done. Optimistic UI is the user interface that implements optimistic updates.
Take the Medium clap icon for instance. If you click this icon, Medium will optimistically update the UI and will start the actual API request in the background. Go on, try it!
This way, we skip showing a loading status to the users and it leads to better UX. It’s like… we instantly say “Okay, you clapped it” and we start sending the API request. In case something bad happens and the request fails, we simply undo the action, un-clap it.
If you haven’t clicked the clap icon yet, at least click it after you finish reading the article. I love claps!
Okay…
It depends on your project which tools you’re going to use in order to implement optimistic updates. Some tools offer some features to easily achieve Optimistic UI such as React Query or React Apollo.
In this article, we are going to take a look at examples without any third-party libraries. If you want to skip and jump directly into React Query or React Apollo, you can use the following links:
Alright! Let’s see some examples!
A Simple Example of Optimistic UI; Like Button
Let’s create a like button using optimistic updates. I guess you’ve seen Twitter like button:
When the user clicks the like button, first we locally like/dislike the tweet then start the actual API request. If the request resolves successfully we don’t need to do anything else but if it fails we need to roll back the action (dislike/like). Okay, we’ve talked enough, now let’s see some code:
