Optimistically Update UI for a Snappier User Experience
The term "optimistic UI update" refers to the approach of immediately updating UI to reflect user actions rather than waiting for a success response from a server. This also requires reverting state in the event of a failure. A real-word example of optimistic UI updates in action is liking and unliking a tweet on Twitter. You can see this yourself by going to Twitter on their desktop web client, opening your devtools, enabling "Offline" in the "Network" panel, and liking a tweet.
In this video, we'll compare the look and feel of non-optimistic UI updates with their optimistic equivalent and introduce the liking and unliking a tweet example we'll be building.
Instructor: [00:00] I want to compare this approach where we click it, submit the request, wait for the request to succeed, and then update stay. We can see what that looks like here. We have some delays going on.
[00:14] I want to contrast this to what we can achieve by pulling in the concept of optimistic UI updates, to where we click these, things happen immediately, and that asynchronously, we can account for failure and revert the state as needed. Let's take a look at implementing this. Let's rip this out. We know that we're going to receive a tweet ID here.
[00:41] Let's log that out to the console to look at what we're working with. Here's our tweet ID, and if we click on these, we're logging into the console this tweet ID. Now, if we look at our state, what we're working with is we have this array of tweets, which is an array of objects with an ID, a number, which is the number of likes per tweet that we're generating here. You can see 03, 98, 0and so on.
[01:12] The user name, which is what we're displaying here, and that tweet content. We're already mapping through that and displaying that. We have a tweet component that's already built for us. Now, we have this function here which is going to act as a request. It's going to mimic making an HTTP request, where it's going to do some logging for us so we can get a feel for when that request begins, ends.
[01:38] We're introducing this idea of making it fail for tweet ID three and four. Now, we can go ahead and plug that in here. What we can do is, let's call our like tweet request, and we'll pass in true for now. We can see that our request function is succeeding and failing as we expect and that we have a promise rejection that we've yet to handle.