YoVDO

Optimistic UI Updates in React

Offered By: egghead.io

Tags

React Courses Web Development Courses User Experience Courses

Course Description

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

Related Courses

Software as a Service
University of California, Berkeley via Coursera
Intro to Computer Science
University of Virginia via Udacity
Web Development
Udacity
Software Engineering for SaaS
University of California, Berkeley via Coursera
CS50's Introduction to Computer Science
Harvard University via edX