Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

egghead.io

Optimistic UI Updates in React

via egghead.io

Overview

No matter what type of app you’re building, you're going to need to fetch data, display it to a user, and enable the user to interact with and update that data. This interaction and updating phase is often asynchronous by nature which presents you, the developer, an opportunity to provide a range of different experiences depending on the scenario.
In some instances, you can leverage what is known as optimistic UI updates for an improved, snappier user experience compared to a traditional “loading/waiting” experience. They aren’t suited for every use case, but selectively making use of optimistic UI updates throughout your application can have a significant impact on the quality of user experience for relatively little cost and complexity!
In this course, we’ll walk through implementing optimistic UI updates in the real world example of liking and unliking a tweet. We'll use React's built-in state and make use of extracting setState updater functions to help manage and better define our setState usages.

Syllabus

  • 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

Taught by

Erik Aybar

Reviews

4 rating at egghead.io based on 221 ratings

Start your review of Optimistic UI Updates in React

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.