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()`](https://reactjs.org/docs/react-component.html#setstate) combined with making use of Javascript's [lexical scoping and closures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures).

Optimistic UI update in React using setState()

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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then) and [`setState()`](https://reactjs.org/docs/react-component.html#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.

Using setState in React

Instructor

Course content (2 lessons)

Instructor