楽観的更新（useOptimistic）とは？意味・仕組みをReact 19で2分で解説

Reactバージョン19の新しいHooks

Reactバージョン19（2024年12月安定版リリース）では、useOptimisticという新しいHooksが導入されました。

useOptimisticは楽観的更新のために使うHooksですが、この「楽観的更新」とはどういう意味なのでしょうか。

本記事では「楽観的更新」について簡単に紹介します。

「楽観的更新」とは、「データ投稿はたぶん成功するだろう」という希望的観測をもって表示に反映させることです。

投稿処理をはじめとするバックエンドとの連携作業は失敗するリスクが必ずありますが、だからといってバックエンドからの成功の可否の連絡を待ってから表示に反映させると、タイムラグが生じてしまい、表示面でスムーズとはいえません。

ここで楽観的更新が使われます。

「楽観的更新」は、実は私たちが毎日のように目にしているものです。

LINEなどのアプリでメッセージを送るときのことを思い出してみましょう。次のように進みます。

注目をして欲しいのは中央の図です。

文字色や背景色などはやや薄く、そして下部にはローディングなどを表示して、処理が現在実行中であることを示しながらですが、送ったメッセージがただちに表示されています。

もしこれを、メッセージの送信がたしかに完了したことを待って表示に反映していたら、私たちユーザーは送信の可否の通知を、ローディングが出ているだけのスクリーンを数秒間見つめながら待たなければいけません（下図）。

「送信は成功するだろう」という希望的観測ですばやくデータを表示に反映させ、処理の成功の可否はそのあとで通知する、という方法にすることで操作の快適性は上がります。これが楽観的更新です。

Reactバージョン19で追加されたuseOptimisticは、この楽観的更新を簡単に実現できるHooksです。

useOptimistic以外にも、React 19ではuseActionStateやuseEffectEvent、<Activity>など注目の新機能が追加されています。

RSCの仕組みとあわせて全体を把握したい方はこちらのガイドをどうぞ▼

useOptimisticはNext.js開発でも活用できる機能です。

RSC・Server Actions・AppフォルダのしくみなどNext.js全体の流れは、こちらのガイドにまとめています▼