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.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!