Course Overview: Optimistic UI Updates in React

Examine Real World Optimistic UI Updates

Optimistically Update UI for a Snappier User Experience

Optimistically Update Multiple Values in State Using React's setState

Refactor Inlined React setState Function to a setState Updater Factory

Revert State On Request Failure using React setState and Closures

Prevent Doubly Updating and Reverting State in React

Update state asynchronously in React using Promise and setState()

Add a loading indicator to UI for request in progress using setState()

Handle a rejected promise and display error to user using setState()

Optimistic UI update in React using setState()

Restore Target Items in React State for Improved Optimistic UI Updates

Optimistic UI Updates in React

A brief overview of the course to give you a preview and feel for what we'll be learning and working towards.

Instructor: [00:00] In this course, we're going to look at the concept of optimistic UI updates. What do you mean by optimistic UI update is that, when a user takes an action view update the UI immediately, even though there may be a request pending.

[00:14] We can assume success updated UI immediately and take action, if any failure does happen. This results in a much snappier more responsive user interface for end users. In our first example, we have this recreated twitter UI where we'll be able to like and unlike a tweet.

[00:34] We will optimistically update our state and also revert the state on failure. We'll address some challenges that come up along the way. Then, we'll walk through hooking up a list UI, or we have a list of items that we can delete.

[00:48] First, we'll build this in a way that is using non-optimistic UI updates. We'll have a loading state to give the user's impression that the request is pending, and also introduce displaying an error tree user upon failure.

[01:05] After that, we'll walk to refactoring towards using optimistic UI updates which will give us a much snappier field to our UI, and address some unique challenges that come up with restoring state to make sure that we're granularly restoring our state and not giving the user the fault impression of failure.

[01:24] Used sparingly optimistic UI updates can give your application a much more polished and more responsive field for relatively low cost and complexity.

Course

Optimistic UI Updates in React

Course Overview: Optimistic UI Updates in React

Share this video with your friends