Optimistic UI update in React using setState()

Nice approach! But how to avoid inconsistent state due to the fact that between taking the snapshot of current state and restoring it after a failure, the user could perform other actions?

For example if you delete item 2 immediately after item 3, item 3 disappears, then disappears item 2, but after item 3 deletion failure both are restored.

Great question, Massimiliano! The simplified approach used in this video may be fine for a number of scenarios, but is definitely not the most robust solution. This will make a great follow up lesson, but I'll try my best to answer your question here now.

how to avoid inconsistent state due to the fact that between taking the snapshot of current state and restoring it after a failure, the user could perform other actions? For example if you delete item 2 immediately after item 3, item 3 disappears, then disappears item 2, but after item 3 deletion failure both are restored.

There are a few ways to address the problem you've described, but I will keep it simple and comparable to the approach used in the video. Instead of taking a snapshot of the entire current state of items, we can take a snapshot of only the item being deleted so that we can more precisely restore the single item in the event of a failure.

You can play with this live on this Codesandbox demo and here is the relevant snippet:

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

  // ...
}

Thank you for the quick reply, I was just playing with something similar. Very interesting subject. I can't wait for the follow up lesson, and I hope there will be more than one if needed (to cover all the ways to address the problem)!

I was screaming in my mind exactly Massimiliano's corner case; its obvious enough that I would have addressed it in the video itself. anyway, nice video!

lol i was too excited to even think about edge cases when i thought: "wth, i should've been doing these techniques a long time ago."