[React] Optimistic UI update in React using setState()

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

      }))

    );

  };

  // ...

}

巴特西

[React] Optimistic UI update in React using setState()

最新文章

热门文章