Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Examine Real World Optimistic UI Updates

    Erik AybarErik Aybar

    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.

    reactReact
    ^16.0.0
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss