No matter what kind of app you are working on, you will need to fetch some data, display it to the user, and enable the user to interact and update it.

This interaction and updating phase is often asynchronous by nature, as the app waits for a response from the backend whether to update the data or not. The update is usually based on the success of the action triggered by the user.

An Optimistic User Interface is when a user triggers an action and the UI updates immediately, even though there may be a request pending.

When our app is built using this kind of UI, we can update the UI right away to the success case. In case of failure, the UI will revert back to the original state.

In the user’s eyes, this UI gives us a much snappier and responsive experience. When used sparingly, optimistic UI updates can give our app a more polished and more responsive field without complexity.

In this tutorial we’ll also be using Bit which is a great way to build with components. You can quickly share components into a visual catalog, reuse them in different apps and collaborate to develop them asa team.

Optimistic UI in Twitter

Twitter is one great example of Optimistic UI. Let’s take an under-the-hood look at Twitter and see how Optimistic UI is implemented here.

Let’s see how Twitter does it. Head over to Twitter and open any tweet. Also, open up your browser’s DevTools and open up the Network tab.

Use the Filter field to take a look at only the POST favorites requests. POST favorites request is triggered when the user clicks on the heart icon.

When you click the heart icon, you will see in the that a create.json request was triggered. The request was resolved very fast and we can’t exactly see what is happening after the user clicks the heart icon. So let’s slow it down by clicking on the online button, and then selecting Slow 3G network.

When you click on the heart button again, we can see that even though the request is pending, the heart was visually updated. Once the request has completed, only then does the “number of likes” increase or decrease.

If we disable the network completely (click on the “offline” button in the DevTools), we can see that the heart icon will visually update, and then revert back to its original state due to network failure.