React 19 RC を触ってみた

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

https://react.dev/blog/2024/04/25/react-19

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

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

```powershell
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;

```

:::note
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` になっていることがわかります。

![Vite-React-Google-Chrome-2024-06-11-09-26-15.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/6ee697ba-e6d4-a5ab-fc8c-cdff70b41df9.gif)

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

※追記：試してみました。

https://qiita.com/Yasushi-Mo/items/184d46d7d877df698c9e

https://qiita.com/Yasushi-Mo/items/3bebc244a97534c96382

https://qiita.com/Yasushi-Mo/items/abaddd44b92ba007e0c7

# 参考
- [React 19 RC](https://react.dev/blog/2024/04/25/react-19)
- [アクションの概念とuseTransition](https://zenn.dev/uhyo/books/react-19-new/viewer/actions)