はじめに

4月の下旬に、React19のBeta版が公開されました！
React 19に関する紹介記事の中で、3つのHooksと1つのAPIが紹介されていたので、codesandboxでコードを作ってみました。

本記事では、それぞれどのように記述できるのかをサンプルコードと共に紹介していきたいと思います。

実際に動かしてみたい場合はサンプルコードの右下に表示されているOpenSandboxを押す事でOpensandBox上で動いている様子を確認したり、コードを変更したりすることができますので、ぜひご活用ください。

hooks : useTransition (async)

まず一つ目はstartTransitionです。
このHooksはReact 18で新たに使える様になったHooksではあるものの、これまでは非同期で利用することはできないという制約がありましたが、React 19では非同期で利用する事ができる様になりました。

hooks : useActionState

次はuseActionStateです。
useActionStateを使うと、return値にstateおよび値の更新中のステータス(isPending)を取得することができます。
これまでも同等の処理を実現したい場合はisPendingのStateを別途作り、処理の前後にそれぞれstateを更新することで比較的簡単に実現可能でしたが、このhooksを利用すると、より簡潔に記述することができる様になります。

useActionStateの詳細はこちらです
https://react.dev/reference/react/useActionState

useOptimistic

3つ目はuseOptimisticです。
その名の通り、optimistic（楽観処理）を行うためのhooksです。
このhooksはとても便利で、新規作成や更新処理などでサーバの値を更新しに行く際、結果を待つことなく更新後の値を表示することができます。これを利用することで、時間のかかる更新処理も一瞬で完了したかの様に見せUXの向上を測ることができます。
（最近のGoogleカレンダーはこれと同じ動きをしているので、更新が爆速に見えます）

UseOptimisticの詳細はこちらです
https://react.dev/reference/react/useOptimistic

API : use

最後はuse APIです。
use を使ってPromiseを返す関数を呼ぶと、そのPromiseがResolveされるまでの間、上位のSuspenseで指定されているfallbackが表示され、Promiseがresolveされると、関数でreturnされた値に置き替わります。
これを実現しようとすると、コンポーネントが増える度にstateが何個も増えてしまい、処理が複雑になりがちでしたが、useを使うことでコードがとても分かりやすくシンプルになります。

use APIの詳細の説明はこちらにあります
https://react.dev/reference/react/use

まとめ

本記事ではReact 19で新たに使える様にある、新たなHooksとAPIについて、サンプルコードと合わせて紹介しました。いずれの機能もこれまでにできなかったことを実現できるというより、よくある機能を実現するためにより簡潔に記述できる様にしたという類のものになりますが、これらを活用することにより、より開発の効率を上げたりソースの可読性を向上させたりすることができる様になると思いますので、しっかりと理解をして活用をしていきたいと思います。

まだ現時点ではベータ版ですが、まもなくリリースされるという噂もありますので、リリースしたらすぐに使える様にしっかり予習しておきましょう！
https://towardsdev.com/exciting-innovations-in-react-version-19-a-sneak-peek-into-the-future-6460d7637de3

参考文献

React19 What's new