Using setState in React

Watch User Created Playlist (2)

This playlist is user created.

pro-course-rss-logo

PRO RSS Feed

Optimistic UI update in React using setState()

P

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

P
react tutorial about Optimistic UI update in React using setState()

Optimistic UI update in React using setState()

3:47 react PRO

In this lesson we will refactor an existing UI update from a typical loading approach to an optimistic UI update approach to give our users a faster, more snappy experience. Instead of displaying a "loading" UI to our users while our request is in progress, we will immediately update the UI and account for reverting state and displaying an error in the event of a failure. We can accomplish this relatively easily in React, thanks to the simplicity and power of setState() combined with making use of Javascript's lexical scoping and closures.

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

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

1:02 react PRO

In this lesson we will add state to our component to indicate whether we are loading to the user. We will "begin loading" before submitting our request to an API and then set "end loading" once the request is complete using Promise.prototype.then and setState(). This gives users a better experience than being left hanging wondering if their action of clicking the button had any effect. Now they will at least have some indication that work is being done while the request is in progress.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?