React 19 の 新機能 useOptimistic を触ってみた

はじめに

この記事では、React 19 で新たに追加された useOptimistic という hook で簡単な実装を行い、その動作を確認してみます。

開発環境

開発環境は以下の通りです。

• Windows 11
• VSCode
• JavaScript
• React 19.0.0-rc-cc1ec60d0d-20240607
• Vite 5.2.0
• Node.js 20.14.0
• npm 10.8.1

また、React 19 RC のインストール方法については、以下の記事に記載しています。

useOptimistic の実装

useOptimistic では、楽観的に非同期処理成功後の値を取得できます。ここでいう楽観的とは、非同期処理を開始する際に（処理が完了する前に）処理成功後の値を取得できるということです。
これによって、ユーザーは操作した結果をすぐに受け取ることができます。

const [optimisticState, addOptimistic] = useOptimistic(state, updateFn);

• 引数
  • state : useOptimistic の管理対象となる値
  • updateFn(currentState, optimisticValue) : 戻り値でのひとつある addOptimistic の処理が記載された関数（optimisticState を返す）
    • currentState : 楽観的更新前の state
    • optimisticValue : addOptimistic の引数
• 戻り値
  • optimisticState : 楽観的更新を反映した値で、更新処理中以外は state と同じ値になる
  • addOptimistic : optimisticState の更新実行関数

App.jsx

import { useActionState, useOptimistic } from "react";

function App() {
  const [likeCount, formAction, isPending] = useActionState(async () => {
    addOptimistic(likeCount + 1);

    await new Promise((res) => setTimeout(res, 3000));

    const response = await fetch("https://example.com/like", {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ likeCount }),
    });
    const jsonResponse = await response.json();
    return jsonResponse.likeCount;
  }, 0);

  const [optimisticLikeCount, addOptimistic] = useOptimistic(
    likeCount,
    (currentLikeCount, optimisticValue) => {
      console.log(
        "🚀 ~ App ~ \ncurrentLikeCount:",
        currentLikeCount,
        "\noptimisticValue:",
        optimisticValue
      );
      return optimisticValue;
    }
  );
  console.log(
    "🚀 ~ App ~ isPending:",
    isPending,
    "\noptimisticLikeCount:",
    optimisticLikeCount,
    "\nlikeCount:",
    likeCount
  );

  return (
    <form action={formActionk}>
      <strong>Like: {optimisticLikeCount}</strong>
      <hr />
      <button type="submit" disabled={isPending}>
        Like
      </button>
    </form>
  );
}

export default App;

動作確認

Like ボタンをクリックした直後、optimisticLikeCount の値が更新されます。一方、isPending が true の間は、likeCount の値は更新されていません。isPending が false になると、likeCount も optimisticLikeCount と同じ値になります。

参考

• React 19 RC
• useOptimistic
• useOptimistic

関連記事