はじめに

この記事では、2024年4月から利用できるようになった React 19 RC をインストールし、新機能のひとつである useTransition を利用した非同期処理を実装して、その動作を確認してみます。

開発環境

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

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 の React と ReactDOM をインストールします。

npm install react@rc react-dom@rc

インストールが成功すると、package.json の値が以下のように更新されます。

package.json

  "dependencies": {
    "react": "^19.0.0-rc-cc1ec60d0d-20240607",
    "react-dom": "^19.0.0-rc-cc1ec60d0d-20240607"
    ...
  },

React 19 の新機能を実装

React 19 では、Actions と呼ばれる非同期関連の新機能が追加されました。
今回は、そのうちのひとつである useTransition を利用した非同期処理を実装してみます。
以下のコードでは、ボタンを押してからAPIリクエストが完了するまでの間のステート管理を useTransition で行っています。

App.jsx

import { useState, useTransition } from "react";
import "./App.css";

function App() {
  const [likeCount, setLikeCount] = useState(0);
  const [isPending, startTransition] = useTransition();
  console.log("🚀 ~ App ~ isPending:", isPending, "\nlikeCount:", likeCount);

  const onClick = async () => {
    startTransition(async () => {
      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();
      setLikeCount(jsonResponse.likeCount);
    });
  };

  return (
    <>
      <strong>Like: {likeCount}</strong>
      <hr />
      <button onClick={onClick} disabled={isPending}>
        Like
      </button>
    </>
  );
}

export default App;

React 18 までは、以下のようにリクエスト開始から完了までのステート管理を useState で行う、もしくは SWR のようなライブラリを利用して行う必要がありました。

App.jsx

import { useState } from "react";
import "./App.css";

function App() {
  const [likeCount, setLikeCount] = useState(0);
  const [isPending, setIsPending] = useState(false);

  const onClick = async () => {
    setIsPending(true);
    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();
    setLikeCount(jsonResponse.likeCount);
    setIsPending(false);
  };

  return (
    <>
      <strong>Like: {likeCount}</strong>
      <hr />
      <button onClick={onClick} disabled={isPending}>
        Like
      </button>
    </>
  );
}

export default App;

動作確認

それでは、実際に動作確認をしてみます。
ボタンを押した直後は、isPending が true になり、likeCount の値が更新された瞬間 isPending が false になっていることがわかります。

最後に

この記事では、React 19 RC のインストール方法と新機能のひとつである useTransition を利用した非同期処理の実装方法を記載しました。今後は他の新機能の実装も試していければと思っています。

React 19 RC を触ってみた

はじめに

開発環境

ライブラリのアップデート

React 19 の新機能を実装

動作確認

最後に

参考