Picovert

React 19 の機能:Actions・use()・新しいフォーム処理モデル

2026-04-148分で読了

React 19 は 3 年ぶりのメジャー React バージョンです。フォーム状態・非同期ミューテーション・ ref フォワーディング・コンテキスト消費という最も一般的な問題を簡略化する変更をリリースします。

Actions:非同期ミューテーションの新パターン

Actions はフォーム送信とミューテーションを処理する非同期関数です。React 19 は Action の ライフサイクルを自動管理するフックを提供します。Actions が置き換えるもの:isLoadingisErrordata の手動 useState、 手動 try/catch、手動 e.preventDefault()

useActionState

useActionState フックはアクション関数をラップし、ペンディング状態と 最後の結果を提供します。

useOptimistic

useOptimistic は楽観的 UI 更新を可能にします — 実際のリクエストが進行中に 期待される結果を即座に表示します。アクションが解決(または拒否)されると、React は楽観的な 状態を実際のデータと自動的に照合します。

use() フック

use() フックはレンダー内でコンテキストや Promise から値を読み取ります。 フックと違い、条件付きで呼び出せます。

prop としての ref

React 19 は forwardRef の必要性を排除します。ref を直接 prop として渡せるようになりました。

JSX 要素としての Context

React 19 では .Provider サフィックスなしでコンテキストを JSX 要素として 直接使用できます。

移行

React 19 はいくつかの長い間非推奨だった API を削除します。React 19 codemod を実行します:npx codemod@latest react/19/migration-recipe