0Pricing
React Academy · レッスン

即時フィードバックのためのuseOptimistic

useOptimisticを使い、server mutationの実行中に楽観的なUI更新を表示します。

「即時フィードバックのためのuseOptimistic」はCoddyKit上の無料React Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全4レッスンが含まれています。

ようこそ

このレッスンでは、React 19 の useOptimistic フックを使い、サーバーのミューテーション実行中に楽観的な UI の変更を即座に表示します。失敗時には自動的にロールバックされます。

Optimistic UI とは

Optimistic UI とは、サーバーのレスポンスを待たずに、サーバーのミューテーションが成功すると仮定して UI をすぐに更新する仕組みです。失敗した場合は、以前の state にロールバックします。

useOptimistic の基本

useOptimistic は実際の state と updater 関数を受け取ります。そして、楽観的な state と、楽観的な更新を適用する関数を返します。
'use client';
import { useOptimistic } from 'react';

const [optimisticLikes, addOptimisticLike] = useOptimistic(
  likes,                      // actual state from server
  (state, newLike) => [...state, newLike] // how to apply optimistic update
);

Like ボタンの例

ユーザーが Like をクリックしたら、まず addOptimisticLike を使って UI に新しい Like をすぐに表示し、その後で実際のリクエストを送信します。リクエストが失敗すると、楽観的な state は自動的に実際の state に戻ります。
async function handleLike() {
  addOptimisticLike({ id: Date.now(), user: currentUser });
  await likePost(postId); // server action
}

楽観的な State の場所

optimisticLikes は Transition 中に楽観的な値を表示します。サーバーが応答し、実際の `likes` state が（再検証によって）更新されると、useOptimistic は自動的に実際の値と同期します。

楽観的な項目の Pending インジケーター

楽観的な項目には、保留中であることがユーザーに伝わるよう、視覚的な印（たとえば少し暗く表示する）を付けます。楽観的な更新に `pending: true` フラグを追加し、それに応じてスタイルを設定できます。
const [optimisticMessages, addOptimistic] = useOptimistic(
  messages,
  (state, msg) => [...state, { ...msg, pending: true }]
);

// Render
{optimisticMessages.map(m => (
  <div key={m.id} style={{ opacity: m.pending ? 0.6 : 1 }}>{m.text}</div>
))}

Transition 内で使用する

useOptimistic は React Transition（startTransition または useTransition）の中でのみ動作します。React 19 で Server Actions を使用する場合は、この処理が自動的に行われます。
'use client';
import { startTransition } from 'react';

const handleSubmit = (data) => {
  startTransition(async () => {
    addOptimistic(data);
    await serverAction(data);
  });
};

チャットメッセージ送信の例

サーバーがメッセージを保存している間、送信したメッセージをチャット一覧にすぐ表示します。メッセージは 'Sending...' 状態で即座に表示され、サーバーが確認すると 'Sent' に切り替わります。

エラー時のロールバック動作

Server Action が失敗（例外をスローまたは reject）すると、useOptimistic は楽観的な値を自動的に破棄し、最後の実際の state に戻します。ロールバックを手動で実装する必要はありません。

useOptimistic と手動の楽観的更新の比較

useOptimistic が登場する前は、2つの state 変数（実際の値と楽観的な値）を管理し、catch ブロックで手動でロールバックしていました。useOptimistic を使うと、これを自動ロールバック付きの1つのフックにまとめられます。

確認問題

楽観的な state を開始した Server Action が失敗すると、楽観的な state はどうなりますか？

まとめ

useOptimistic(actualState, updater) は [optimisticState, addOptimistic] を返します。即座にフィードバックを表示するには、Server Action の前に addOptimistic を呼び出します。Action が失敗すると React が自動的に元に戻します。React Transitions の中で動作します。

コース完了

おめでとうございます！ **Server Components & React 19 Features** を修了しました。これで、現代的な React 開発に必要な RSC、use() フック、Actions、useActionState、useOptimistic について理解できました。

よくある質問

「即時フィードバックのためのuseOptimistic」レッスンは無料ですか？

はい。「即時フィードバックのためのuseOptimistic」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全4レッスンが含まれています。

「即時フィードバックのためのuseOptimistic」で何を学びますか？

useOptimisticを使い、server mutationの実行中に楽観的なUI更新を表示します。 ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

React Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。

「即時フィードバックのためのuseOptimistic」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このReact Academyレッスンでコードを書いて実行できますか？

はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. React Server Componentsの基礎
  2. 非同期リソースのためのuse() Hook
  3. React ActionsとuseActionState
  4. 即時フィードバックのためのuseOptimistic
← React Academyに戻る