React 19

 (github.com/facebook)
2 ポイント 投稿者 GN⁺ 2024-12-06 | 1件のコメント | WhatsAppで共有

19.0.0 (2024年12月5日)

新機能

React
  • Actions: startTransition は非同期関数を受け入れ可能になりました。これらの関数は「Actions」と呼ばれ、状態をバックグラウンドで更新し、UI を一度にコミットします。Actions は非同期リクエストのような副作用を実行でき、Transition が完了する前に処理の完了を待機します。
  • useActionState: Transition 内で Actions を順序付けし、状態にアクセスできる新しいフックです。初期状態と reducer を受け取ります。
  • useOptimistic: Transition の進行中に状態を更新する新しいフックです。Transition が完了すると、状態は新しい値に更新されます。
  • use: レンダリング時にリソースを読み取れる新しい API です。Promise または Context を受け取り、Promise が渡された場合は値が解決されるまで中断されます。
  • ref を prop として使用: forwardRef を必要とせずに ref を prop として使用できます。
  • Suspense の兄弟要素のプリウォーミング: コンポーネントが中断されると、React は最も近い Suspense 境界のフォールバックを即座にコミットします。
React DOM クライアント
  • <form> action prop: Form Actions は自動的にフォームを管理し、useFormStatus と統合されます。成功時にはフォームを自動的にリセットします。
  • ドキュメントメタデータのサポート: ドキュメントメタデータタグをコンポーネントからネイティブにレンダリングできます。
  • スタイルシートのサポート: Suspense 境界のコンテンツを公開する前に、クライアントの <head> にスタイルシートを挿入します。
  • 非同期スクリプトのサポート: コンポーネントツリーのどこからでも非同期スクリプトをレンダリングできます。
React DOM サーバー
  • prerender および prerenderToNodeStream API を追加: 静的サイト生成向けの API で、Node.js ストリームや Web ストリームなどのストリーミング環境で動作するよう設計されています。
React サーバーコンポーネント
  • RSC 機能: ディレクティブ、サーバーコンポーネント、サーバー関数が安定化しました。サーバーコンポーネントを含むライブラリは、React 19 をピア依存関係としてターゲットにできるようになりました。

非推奨予定

  • element.ref へのアクセス: element.props.ref を推奨し、element.ref へのアクセスは非推奨になります。
  • react-test-renderer: React 19 では react-test-renderer が非推奨警告を出力し、Web 利用向けに並行レンダリングへ移行します。

主な変更点

React
  • 新しい JSX 変換が必須: バンドルサイズを改善し、React を import せずに JSX を使えるようにする新しい JSX 変換が必要です。
  • レンダリングエラーは再スローされない: エラーが Error Boundary に捕捉されなかった場合、window.reportError に報告されます。
  • propTypes の削除: propTypes の使用は静かに無視されます。TypeScript への移行が推奨されます。
  • 関数の defaultProps を削除: 代わりに ES6 のデフォルト引数を使用できます。
  • 文字列 refs の削除: 文字列 refs の使用は ref コールバックへ移行する必要があります。
React DOM
  • react-dom/test-utils の削除: act は react-dom/test-utils から react に移動しました。その他のユーティリティは削除されます。
  • ReactDOM.render, ReactDOM.hydrate の削除: 並行レンダリング向けの ReactDOM.createRoot および ReactDOM.hydrateRoot に置き換えられます。

注目すべき変更点

React
  • <Context> をプロバイダーとして使用: <Context.Provider> の代わりに <Context> をプロバイダーとしてレンダリングできます。
  • カスタムエレメントのサポート: React 19 はすべてのカスタムエレメントテストを通過します。
  • StrictMode の変更点: useMemo と useCallback は最初のレンダリングのメモ化結果を再利用します。
React DOM
  • ハイドレーションエラーの差分表示: 不一致が発生した場合、React 19 は不一致コンテンツの差分を含む単一のエラーを記録します。

TypeScript の変更点

  • 暗黙的な return を禁止: refs はクリーンアップ関数のみを受け入れます。暗黙的な return はエラーを発生させます。
  • useRef の初期引数が必要: 初期引数は必須です。
  • 厳格な ReactElement タイピング: React 要素の props は今後 any ではなく unknown がデフォルトになります。

関連記事

1件のコメント

 
GN⁺ 2024-12-06
Hacker News の意見

  • Reactを使ってスケーラブルなアプリを構築するのは可能であり、楽しいと感じる意見がある

    • TSサポートとコミュニティライブラリのおかげで、簡単に構築・拡張できると考えている
    • 新機能が人々を怖がらせる理由が理解できない
    • Jetpack ComposeとSwift UIはReactから着想を得たという意見がある
    • 過去にjQueryやplain JSで大規模なWebアプリを構築するのが楽しかったのかという疑問がある

  • Reactの新しいリリースについて前向きな意見を持っている一方で、初心者が始めるのは難しいかもしれないという懸念がある

    • Reactは依然として優れたフレームワークであり、今回のリリースには改善点があると考えている
    • 批判はReact自体というより、フロントエンド開発全般に向けられたものだとしている

  • クライアントサイドフレームワークの複雑さが増しているという意見がある

    • バックエンド、フロントエンド、DevOpsスタックなど、あらゆる場所で複雑さが増していると感じている

  • 新しいリリースで ref as a prop 機能が追加され、forwardRefが不要になった点を前向きに評価している

  • Reduxの代わりにRecoilクローンであるJotaiに言及し、React 19と互換性があると述べている

    • フロントエンドの複雑さのため、別の状態管理ツールが足かせになる可能性があると考えている

  • use APIの名前変更を望む意見がある

    • React hooksに初めて触れる人が混乱するかもしれないと考えている

  • 並列サスペンスの問題を解決するためにリリースを遅らせた点を前向きに評価している

  • 既存の組み込みフックをベースにuseActionStateフックを構築できるのかという疑問がある

  • 標準的なWeb技術の利用を促す機能や、使い勝手を改善する機能が追加された点を前向きに評価している

    • サスペンスのトリガーには依然としてフレームワーク側のサポートが必要な点に失望している
    • TanStack Queryを通じてサスペンスの仕組みを理解しようとしたが、うまくいかなかった