はじめに
React19がリリースされましたね！
ドキュメントの概要理解のために要約してもらったので参考にどうぞ！
（あくまで概要理解なので詳細を知りたい方はリリースノートを参考にしてください）
https://react.dev/blog/2024/12/05/react-19#actions
安定版のリリース
- React 19が正式にリリースされ、npmで利用可能になりました
- 4月のRC版からの追加機能として、suspended treesのプリウォーミングとReact DOM Static APIが含まれています
Actions（新機能）
- データの変更と状態更新をより効率的に処理する新機能
- 非同期関数をトランジションで処理し、以下の状態を自動管理：
- pending状態
- エラー処理
- フォーム
- 楽観的更新
- useTransitionを使用した新しい実装方法により、コードがシンプルに
フォームの改善
-
<form>要素がactionとformActionプロップをサポート - フォーム送信後の自動リセット機能
- useFormStatusフックによるフォーム状態の簡単な取得
新しいフック
- useActionState
- Actionsの共通ケースを処理する新しいフック
- 以前のuseFormStateから改名・改善
- useFormStatus
- フォームのコンテキスト情報へ簡単にアクセス
- プロップのドリルダウンなしでフォーム状態を取得可能
- useOptimistic
- データ更新時の楽観的UIを実現
- 非同期リクエスト中でもユーザーに即座にフィードバックを提供
新しいuse API
- レンダリング時にリソースを読み込むための新API
- Promiseを使用した非同期データの取り扱いが可能
- 注意点：レンダリング時に作成されたPromiseはサポート外
React DOM Static APIs
- prerenderとprerenderToNodeStreamの2つの新APIを追加
- 静的サイト生成のためのHTML生成を改善
- Node.js StreamsやWeb Streamsとの連携をサポート
React Server Components
- コンポーネントをビルド前にレンダリングする新オプション
- クライアントアプリケーションやSSRサーバーとは別環境で動作
- CIサーバーでのビルド時実行や、Webサーバーでのリクエスト時実行に対応
- 注意点：Server Componentsには専用のディレクティブは不要
Server Actions
- クライアントコンポーネントからサーバー上の非同期関数を呼び出し可能
- "use server"ディレクティブを使用して定義
- フレームワークが自動的にサーバー関数への参照を作成
この更新により、React開発の効率性と柔軟性が大幅に向上し、特にフォーム処理、状態管理、サーバーサイド機能の統合が改善されています。