Optimistic UI Updates in React
Offered By: egghead.io
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.
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 ServiceUniversity 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