React v19 - Actions、Server Components、Hydration エラー改善、Document Metadata サポートなど

 (react.dev)
11 ポイント 投稿者 ssssut 2024-12-06 | 1件のコメント | WhatsAppで共有

新しい API と機能

  • Actions: データ変更と状態更新を自動で処理。待機状態、エラー、optimistic update などを自動管理
  • useActionState: Actions の一般的なユースケースを簡単に処理できる新しいフック
  • use API: レンダリング中に Promise とコンテキストの読み取りが可能
  • useOptimistic: 非同期リクエスト中の optimistic UI update を簡単に実装
  • ref as a prop: 関数コンポーネントで ref prop を直接使用可能 (forwardRef 不要)
  • <Context> as a Provider: <Context.Provider> の代わりに <Context> を直接使用可能

ドキュメントおよびリソース管理

  • メタデータ対応: <title>、<link>、<meta> タグをコンポーネント内で直接使用可能
  • スタイルシート対応: コンポーネント内でスタイルシートの読み込みと優先順位管理
  • 非同期スクリプト対応: コンポーネントツリーのどこからでも非同期スクリプトをレンダリング可能
  • リソースのプリロード: パフォーマンス最適化のための prefetchDNS、preconnect、preload、preinit API を提供

改善点

  • カスタム要素対応: カスタム要素への完全なサポートを追加
  • エラー処理の改善: 重複エラーの除去とエラー処理オプションを追加
  • サードパーティスクリプト/拡張機能との互換性: Hydration 過程でのサードパーティコンテンツ処理を改善
  • Hydration エラー改善: より明確なエラーメッセージとデバッグ情報を提供

サーバーコンポーネント

  • 安定化された Server Components: Canary チャンネルのすべての Server Components 機能が React 19 に含まれる
  • Server Actions: クライアントコンポーネントからサーバー関数を呼び出す機能を提供

その他

  • useDeferredValue の初期値: useDeferredValue に初期値オプションを追加
  • ref のクリーンアップ関数: ref コールバックからクリーンアップ関数を返せるように
  • 新しい Static API: prerender と prerenderToNodeStream API を追加

関連記事

1件のコメント

 
carnoxen 2024-12-06

今回の 19 では、議論のあった &lt;Suspense&gt; の動作が再定義されました。これまではあるコンポーネントを Suspense すると、次の Suspense コンポーネントまでレンダリングしてからフォールバックを生成していましたが、現在はあるコンポーネントを Suspense すると、まずフォールバックを生成し、その次に次の Suspense コンポーネントをレンダリングする順に変わりました。

Improvements to Suspense

ひと言でいえば、初回レンダリング時間が短縮されたということです。うまく解決されてよかったですね。