Optimistically Pessimistic
When learning JavaScript, I have come to realize there are a plethora of concepts that I have found a little overwhelming. In order for me to have a greater understanding of a subject I always need to know the why. Thats why I wanted to dive deeper into understanding the concept and usage of Optimistic and Pessimistic rendering in JavaScript. The purpose of this blog is to explore the concept of optimistic and pessimistic UI rendering, why it’s done, and finally what does this look like in JavaScript.
What is Optimistic and Pessimistic Rendering
Optimistic and Pessimistic Rendering are two approaches to providing feedback to the end user on the front end. The Optimistic approach is when the User Interface or UI displays a response before any action has been taken by the server. It is purely an acknowledgement of user input on the front end. With this approach it is not guaranteed that the action was performed successfully on the server. Alternatively, Pessimistic rendering is just the opposite. With this approach the UI waits for for a response from the server before displaying any change.
Why Do We Use Optimistic and Pessimistic Rendering
If you have ever used a banking app to move around your balances from savings to checking or vice versa, you will have seen a message saying something like transaction successful or error. Either way that message was triggered after the response from the server confirmed the update was successful or not. This is a perfect example of Pessimistic Rendering.
Alternatively, if Optimistic Rendering were used in this example, your banking app would display a message immediately after transferring funds without actually waiting for the server to accomplish the task. This could be disastrous for the user if there was an error and the funds were not transferred. It is best to use the pessimistic approach in this example.
A better usage of Optimistic Rendering is the Like button on Instagram. When a user likes a post, they immediately see the update on the UI before the update has been sent to the server. This approach works in this case because there is no real risk if the Like action failed to propagate to the server.
Both approaches are useful in certain scenarios. When used properly they enhance the user experience of your app and provide assurance and feedback to the user.
What Does it Look Like in JavaScript
Below are examples of how to implement Optimistic and Pessimistic Rendering in JavaScript. You can see in the Optimistic example that detailH4 gets updated before the fetch to the server. In the Pessimistic example you see that detailH4 is not updated until after it has been updated in the database.
Optimistic
Pessimistic
It is important to understand what Optimistic and Pessimistic UI Rendering is, but it is more important to understand when to use which approach. It also does not have to be one or the other. There are many cases where both Optimistic and Pessimistic approaches can enhance usability. For example, imagine an app that makes an API call to get data from Twitter. The user clicks a button to get data, but the API call might take a few seconds. Without any feedback, the user might be tempted to re-click the button. This would cause subsequent requests and further lag. In this case, it would be useful to use both Optimistic and Pessimistic approaches. This would display feedback to the user upon button click that the input was received (Optimistic), as well as update the front end once the data was retrieved from the API call (Pessimistic). Both are necessary to provide good feedback and user experience.
