はじめに

12/5に、React19が正式リリースされました。

https://react.dev/blog/2024/12/05/react-19

その中で以下のhooksがstableとしてリリースされたので、使い方など書いていきます。
特にuseActionStateは、かなり便利なhookで、これからかなり使われるようになるhookだと思います。

• useActionState
• useFormStatus
• useOptimistic

useActionState

useActionStateは、アクションの実行結果を利用したいときに使うhookです。
アクションを実行させることを目的としたuseTransitionと、ステートを管理すること目的としたuseReducerを合体させているhookです。

https://react.dev/blog/2024/12/05/react-19#new-hook-useactionstate

実装例

今までの実装

React19以前だと、以下のようにuseStateなどを使って、ローディングの表示やフォームの値の管理などを行い、実装をしていたかと思います。

useActionStateを使った実装

さっきと比べて、とても効率的に実装することができているのがわかります。
とても便利！

細かく解説してきます。

・name
ステートの初期値
このコードでは、useActionStateの第二引数の「"prevState"」が入ってきます。

・submitAction
アクションを発火させる関数
こちらはFormのアクション属性に渡します。

・isPending
実行中であるかどうかの状態を管理するステートです。

useActionStateの内部では、ステート(prevState)とアクション(FormData)を受け取って、新しいステートを返すといったものです。
※アクションは非同期なので、async, awaitが使えます。

第二引数("prevState")は、ステートの初期値となります。

useFormStatus

useFormStatusは、フォームをsubmitした後の処理の状態をユーザーに知らせることができるようにするhookです。
ただし、useFormStatusは、Formコンポーネント内部のコンポーネント内部でuseFormStatusを定義しないと動作しません

https://react.dev/blog/2024/12/05/react-19#new-hook-useformstatus

実装例

正しい例

ダメな例

こちらは、form内部のコンポーネントでuseFormStatusを定義していないため、pendingは機能しません。

useOptimistic

useOptimisticは、楽観的UI更新を実現してくれるhookです。
楽観的UI更新は、実際の処理が終わる前に、ユーザーに完了後の状態を表示するUIのことです。
例としては、X(Twitter)のいいねボタンなどが挙げられます。

https://react.dev/blog/2024/12/05/react-19#new-hook-optimistic-updates

実装例

以下の実装では、フォームにテキストを入力し、Submitボタンをクリックすると、最初に赤い文字で入力したテキストが表示され、3秒後に青い文字で、入力したテキストが表示されます。

まとめ

React19で追加されたhooksは、どれも便利なものばかりですね。
特に、useActionStateは、特に便利で、これから使われる頻度がかなりかなり高そうな機能だなと思いました。

最後に

他にも色々な記事を書いているので、よければ読んでいってください！

https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc

https://qiita.com/hukuryo/items/2c07c52ff3386d5d75b9

https://qiita.com/hukuryo/items/ebeb26823f944f143b11
[cv:issue_marketplace_engineer]