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
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.