React の機能、非推奨、および重大な変更を調べる

React 19 は、豊富な新機能、改善、重大な変更をもたらします。このリリースでは、開発者が状態管理、フォーム、サーバー側レンダリングを処理する方法を再定義し、レガシー API を非推奨にします。アップグレードを計画している場合は、変革の旅に向けてシートベルトを締めてください。このガイドでは、スムーズな移行を確実にするためのヒントとともに、React 19 のハイライトを説明します。

---

React 19 のハイライト

新機能

1. アクションと useActionState

startTransition API は、「アクション」と呼ばれる非同期関数をサポートするようになりました。アクションは状態の更新を管理し、fetch() などの副作用を処理し、エラー処理を含めることができます。調整された状態更新と UI レンダリングにより遷移を合理化します。

新しい useActionState フック は、保留状態や最終状態を含むアクション状態へのアクセスを提供することでこれを補完します。これは、詳細な制御のためのリデューサーを受け入れるため、フォームのインタラクションや複雑な状態フローに不可欠なツールになります。

2. useOptimistic を使用したオプティミスティック更新

useOptimistic を使用すると、開発者は移行の進行中に一時的な状態変更を設定でき、よりスムーズなユーザー エクスペリエンスを提供できます。非同期操作が完了すると、状態は自動的に戻るか更新されます。

3. API を使用する

React 19 では、レンダリング中に Promise やコンテキストを読み取ることができる use API が導入されました。これにより、サーバー データの取得ワークフローが簡素化されますが、レンダリング関数内でのみ呼び出すことができるという制限があります。

4. Prop として参照

ref を props として直接渡すことができるようになり、forwardRef が不要になりました。この変更により、コンポーネントの構成が簡素化され、ref の操作がより直感的になりました。

5. 改良されたサスペンス

Suspense は、兄弟の事前ウォーミングをサポートするようになりました。これにより、兄弟が中断されるとすぐにフォールバック コンポーネントがコミットされます。この機能強化により、データ量の多いアプリケーションのパフォーマンスとユーザー エクスペリエンスが向上します。

---

React DOM クライアントの機能強化

1. フォームアクション

React のフォームは

を使用することでよりスマートになります。 action props により、useFormStatus との統合が向上します。フォームを送信すると、制御されていないコンポーネントの状態が自動的にリセットされます。

2. ドキュメントのメタデータとリソースの最適化

React 19 は、