In this lesson we will refactor an existing UI update from a typical loading approach to an optimistic UI updateapproach 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.
class App extends React.Component { // ... deleteItemOptimistic = id => { // 1) Snapshot target item so we can restore it in the case of failure const deletingItem = this.state.items.find(item => item.id === id); // 2) Assume success. Immediately update state this.setState(state => ({ items: state.items.filter(item => item.id !== id), })); // 3) If the request failed revert state and display error. deleteItemRequest(id).catch(() => this.setState(state => ({ // Restore the single, deleted item. // Use sort to ensure it is inserted where expected. items: [...state.items, deletingItem].sort((a, b) => a.id - b.id), error: `Request failed for item ${id}`, })) ); }; // ... }
