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  combined with making use of Javascript's .

 

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}`,      }))    );  };  // ...}