【React】Pessimistic UpdateとOptimistic Updateの違い

Pessimistic Updateとは？

Pessimistic Update(悲観的な更新)とは非同期通信が成功するか分からないので、成功or失敗するまで待ってから手元のDOMを更新する方法である。非同期通信の結果を待つ必要があるので非常に遅い。

// post = {id: 1, name: 'hoge'}のようなオブジェクト 

handleDelete = async post => {
  // posts/3のようなurlへdeleteメソッドでアクセス
  await axios.delete(`${apiEndpoint}/${post.id}`);
  // 非同期通信が終わってからstateを更新する
  // 引数で受け取ったpostを除外する新しい配列postsを作成
  const posts = this.state.posts.filter(p => p.id !== post.id);
  this.setState({ posts }); //このタイミングでviewが再レンダリングされる
}

Optimistic Updateとは？

Optimistic Update(楽観的な更新)とは非同期通信が成功することを前提としてローカルのリソースを先に更新することである。つまり、サーバー上のリソースの変更が成功したかどうかに関わらず、先にstateを更新してDOMを更新するのである。awaitでpromiseオブジェクトを待つ必要がないので、スピードが上がりUXが向上される。

handleDelete = async post => {
  const originalPosts = this.state.posts;
  // 引数で受け取ったpostを除外する新しい配列postsを作成
  const posts = originalPosts.filter(p => p.id !== post.id);
  this.setState({ posts }); //このタイミングでviewが再レンダリングされる

  try {
    await axios.delete(`${apiEndpoint}/${post.id}`);
  } catch (ex){
    // もし失敗するとviewが再レンダリングされて元に戻る
    alert('投稿の削除に失敗しました')
    this.setState({ posts: originalPosts })
  }
}