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.
