はじめに
この記事では、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 を利用した非同期処理の実装方法を記載しました。今後は他の新機能の実装も試していければと思っています。
※追記：試してみました。