v19.2Latest

はじめに

React Compilerは、Reactアプリケーションを自動的に最適化する新しいビルド時ツールです。プレーンなJavaScriptで動作し、Reactのルールを理解するため、使用するためにコードを書き直す必要はありません。

学習内容
  • React Compilerの役割
  • コンパイラの始め方
  • 段階的な導入戦略
  • 問題発生時のデバッグとトラブルシューティング
  • Reactライブラリでのコンパイラの使用

React Compilerは何をするのか？

React Compilerは、ビルド時にReactアプリケーションを自動的に最適化します。Reactは最適化なしでも十分に高速なことが多いですが、アプリの応答性を維持するためにコンポーネントや値を手動でメモ化する必要がある場合もあります。この手動メモ化は退屈で、間違いやすく、保守すべき余分なコードを追加します。React Compilerはこの最適化を自動的に行い、この精神的負担から解放して機能の構築に集中できるようにします。

React Compiler以前

コンパイラがない場合、再レンダリングを最適化するためにコンポーネントや値を手動でメモ化する必要があります：

注記

この手動メモ化には、メモ化を破壊する微妙なバグがあります：

handleClickがuseCallbackでラップされていても、アロー関数() => handleClick(item)はコンポーネントがレンダリングされるたびに新しい関数を作成します。これは、Itemが常に新しいonClickプロップを受け取り、メモ化が破られることを意味します。

React Compilerは、アロー関数の有無に関わらずこれを正しく最適化でき、Itemがprops.onClickが変更されたときのみ再レンダリングされることを保証します。

React Compiler以後

React Compilerを使用すると、手動メモ化なしで同じコードを記述できます：

この例をReact Compiler Playgroundで見る

React Compilerは最適なメモ化を自動的に適用し、アプリが必要なときのみ再レンダリングされることを保証します。

Deep Dive
React Compilerはどのようなメモ化を追加しますか？

コンパイラを試すべきですか？

私たちは、すべての人がReact Compilerの使用を開始することを推奨します。コンパイラは現在もReactへのオプションの追加機能ですが、将来的には一部の機能が完全に動作するためにコンパイラを必要とする可能性があります。

使用しても安全ですか？

React Compilerは現在安定しており、本番環境で広くテストされています。Metaなどの企業で本番環境で使用されていますが、アプリの本番環境へのコンパイラの展開は、コードベースの健全性とReactのルールにどれだけ従っているかに依存します。

どのビルドツールがサポートされていますか？

React Compilerは、Babel、Vite、Metro、Rsbuildなどのいくつかのビルドツールにインストールできます。

React Compilerは主に、コアコンパイラをラップする軽量なBabelプラグインであり、Babel自体から切り離すように設計されています。コンパイラの最初の安定バージョンは主にBabelプラグインとして残りますが、swcおよびoxcチームと協力して、React Compilerのファーストクラスサポートを構築しており、将来的にビルドパイプラインにBabelを追加する必要がなくなります。

Next.jsユーザーは、v15.3.1以降を使用して、swcによって呼び出されるReact Compilerを有効にできます。

useMemo、useCallback、React.memoについてはどうすればよいですか？

デフォルトでは、React Compilerはその分析とヒューリスティックに基づいてコードをメモ化します。ほとんどの場合、このメモ化は、あなたが書いたものと同じくらい正確か、それ以上になります。

ただし、場合によっては、開発者がメモ化をより細かく制御する必要があるかもしれません。useMemoおよびuseCallbackフックは、React Compilerと共に、どの値をメモ化するかを制御するためのエスケープハッチとして引き続き使用できます。これの一般的なユースケースは、メモ化された値がエフェクトの依存関係として使用される場合で、依存関係が意味的に変化していない場合でもエフェクトが繰り返し発火しないようにするためです。

新しいコードでは、メモ化にはコンパイラに依存し、必要な場合にuseMemo/useCallbackを使用して細かい制御を実現することをお勧めします。

既存のコードについては、既存のメモ化をそのまま残す（削除するとコンパイル出力が変わる可能性がある）か、メモ化を削除する前に注意深くテストすることをお勧めします。

React Compilerを試す

このセクションでは、React Compilerの使い始め方と、プロジェクトで効果的に使用する方法を理解するのに役立ちます。

追加リソース

これらのドキュメントに加えて、コンパイラに関する追加情報や議論については、React Compilerワーキンググループを確認することをお勧めします。

上一篇React Compiler下一篇インストール