Examine Real World Optimistic UI Updates
Most of the applications we use day to day have optimistic UI updates sprinkled throughout them if you look close enough. One familiar example we'll examine and use as an example throughout this course is liking and unliking a tweet on Twitter. In this video, we'll take a peek under the hood of https://twitter.com/ using Google Chrome's DevTools Network panel. We'll mimic a slow 3g network to slow things down and get a feel for exactly when the optimistic UI updates are occurring and when the UI state is reverted upon failure.
Instructor: [00:00] To take a look at a real world example of optimistic UI updates in action, we can head to Twitter, open up our DevTools, and head to the network tab. We'll filter down to just this request that is going to be fired off when we click the heart icon.
[00:15] When we click that, we'll see that everything seems happen pretty instantaneously. We can slow that down, and then we can slow 3G network. When we click this, we'll see that the request is pending, although the heart was visually updated. Once a request is completed, that is when they increment or decrement the like counter.
[00:36] If we disable the network altogether, we'll see when we click, it will visually update, and they revert the state as soon as they determine that there was a network failure.