Optimistic vs. Pessimistic Rendering

Natalia Wit
2 min readFeb 27, 2020

--

During my journey of learning Javascript, I found myself struggling with the concept of Optimistic vs Pessimistic rendering. I began involving myself in discussions with other people and researching online articles to try and get the basic concepts down.

One thing I struggled with the most was understanding the use of Optimistic vs Pessimistic rendering and it all comes down to user interaction and experience with the web application. It is important to distinguish the difference between the two, to create the best optimal experience for the user and the success of your website.

What is Optimistic rendering?

Optimistic rendering reflects on the DOM before the updates are added to the database. Referring back to the user interaction, we can use the example of a LIKE button. When a user clicks on a LIKE button, they would like to see the LIKE update right away but that does not mean that it will save to the database. There is always a slight chance that the number of likes might not persist in a case where the user might not have an internet connection. The Optimistic approach takes the leap of faith regardless of the event’s success state.

Optimistic rendering approach.
Optimistic rendering approach

What is Pessimistic rendering?

When it comes to Pessimistic rendering, we have to consider wait time, we have to wait for a response from the server for the success of our event. For example, the user submits a form => a call is sent to the server for a response => based on the response success that will determine if the update will render to the page.

Pessimistic rendering approach

Summary

It is important to remember that one approach is not necessarily better than the other. As a developer, it is important to think about user experience and when it is appropriate to use an Optimistic vs Pessimistic approach. For example, you would not want to use an Optimistic approach when developing a transfer feature on a banking app without making sure the transfer was successful.

--

--

No responses yet