【ISSUE】React19でリリースされたhooksを覚えよう
2024年12月23日 8:40
12/5に、React19が正式リリースされました。
https://react.dev/blog/2024/12/05/react-19
その中で以下のhooksがstableとしてリリースされたので、使い方など書いていきます。
特にuseActionStateは、かなり便利なhookで、これからかなり使われるようになるhookだと思います。
useActionStateは、アクションの実行結果を利用したいときに使うhookです。
アクションを実行させることを目的としたuseTransitionと、ステートを管理すること目的としたuseReducerを合体させているhookです。
https://react.dev/blog/2024/12/05/react-19#new-hook-useactionstate
React19以前だと、以下のようにuseStateなどを使って、ローディングの表示やフォームの値の管理などを行い、実装をしていたかと思います。
さっきと比べて、とても効率的に実装することができているのがわかります。
とても便利!
細かく解説してきます。
・name
ステートの初期値
このコードでは、useActionStateの第二引数の「"prevState"」が入ってきます。
・submitAction
アクションを発火させる関数
こちらはFormのアクション属性に渡します。
・isPending
実行中であるかどうかの状態を管理するステートです。
useActionStateの内部では、ステート(prevState)とアクション(FormData)を受け取って、新しいステートを返すといったものです。
※アクションは非同期なので、async, awaitが使えます。
第二引数("prevState")は、ステートの初期値となります。
useFormStatusは、フォームをsubmitした後の処理の状態をユーザーに知らせることができるようにするhookです。
ただし、useFormStatusは、Formコンポーネント内部のコンポーネント内部でuseFormStatusを定義しないと動作しません
https://react.dev/blog/2024/12/05/react-19#new-hook-useformstatus
こちらは、form内部のコンポーネントでuseFormStatusを定義していないため、pendingは機能しません。
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]
診断を受けるとあなたの現在の業務委託単価を算出します。今後副業やフリーランスで単価を交渉する際の参考になります。また次の単価レンジに到達するためのヒントも確認できます。