ReactCompilerは、useMemo、useCallback、React.memoなどのテクニックを使用せずに不必要な再レンダリングを最小限に抑えるためにReactチームによって開発された新しい強力なツールです。この記事では、ReactCompilerを学習してテストし、その有効性を明確に確認します。
Reactコンパイラーが重要な理由?
ReactCompilerは、Reactの最も複雑な問題の1つであるパフォーマンスの最適化を解決することを目的として登場しました。以前は、不必要な再レンダリングを防ぐために、useMemo、useCallback、またはReact.memoを使用する必要がありました。これらの手法は効果的ではありますが、複雑でわかりにくいものです。ReactCompilerはこのプロセスを簡素化し、手動の最適化手法への依存を最小限に抑えます。
Reactコンパイラの入門
まず、Viteを使用して新しいプロジェクトを作成します。Next.js、Webpack、またはReactNativeを使用することもできます。この記事の執筆時点では、ViteでReactプロジェクトを作成するときにインストールされているReactおよびReact-domのバージョンは18.2.0です。ReactCompilerを使用するには、React19R.Cにアップグレードする必要があります。
インストールと構成
まず、Viteを使用してReact.jsプロジェクトを初期化します。
2024年5月18日の時点で、Viteを使用してReact.jsプロジェクトを起動すると、ReactとReact-domのバージョンは18.2.0になります。ReactのコンパイラにはReact19R.Cが必要なので、バージョンを更新する必要があります。
ReactCompilerはBabelのプラグインとしてインストールされます。
Viteconfigのプラグインセクションを編集する必要があります。
これで、プロジェクトのReactComplierのインストールと統合が完了しました。次に、Reactコンパイラーがどのように動作し、期待に応えるかをテストするための小さなサンプルを作成します。
コンポーネントユーザーを作成し、このコンポーネントをAppコンポーネントにインポートします。
画像に示すように、「ユーザーコンポーネントが再レンダリングされました」という行が2回表示されます。これはReactのStrictModeメカニズムによるものです。「カウントが0」ボタンをクリックすると、Reactは「カウント」状態を更新し、Appコンポーネントを再レンダリングします。親コンポーネントが再レンダリングされると、プロップが変更されるかどうかに関係なく、子コンポーネントも再レンダリングされます。
不必要な再レンダリングを避けるために、パフォーマンスを最適化し、この状況を制限するために「メモ」を使用することがよくあります。
“memo”を使用してUserコンポーネントをラップする場合の重要な注意点は、親コンポーネントが再レンダリングされる場合、子コンポーネントが再レンダリングを制限できることです。ただし、「onClick」プロパティが再初期化された場合、子コンポーネントは引き続き再レンダリングされます。これは、Appコンポーネントが再レンダリングされるときに、onClick関数が再初期化されるために発生します。その結果、「memo」が使用されている場合でも、これらのonClickプロパティを受け取る子コンポーネントも再レンダリングされます。
この状況を効果的に解決するには、useCallbackフックを使用して、AppコンポーネントのonClick関数をラップします。これにより、レンダリングのたびに不要な新しい関数の作成が回避され、アプリケーションのパフォーマンスが最適化されます。「useCallback」を使用することで、依存関係(この場合は空の配列)が変更された場合にのみ「onClick」関数が再作成されるようになり、パフォーマンスが向上し、不必要な再レンダリングが回避されます。
上記の問題を解決するには、「memo」と「useCallback」という2つの主要なツールが必要です。状況がより複雑になった場合、「useMemo」を適用すると効率が最適化されます。ただし、フックを使いすぎると、アプリケーション開発プロセスが複雑で混乱する可能性があります。さらに、「useCallback」と「useMemo」に渡される依存関係を適切に管理しないと、これらのフックの可能性を最大限に活用することができません。したがって、これらのフックを効果的に使用するには、注意と依存関係の管理スキルが非常に重要です。
Reactコンパイラーにより、再レンダリングを最適化するために「useCallback」、「useMemo」、「memo」などのフックを使用する必要がなくなりました。図に示すように、「カウント」状態は値3に更新されますが、ユーザーコンポーネントはまだ再レンダリングされていません。
結論する
ReactCompilerは、Reactのパフォーマンスの最適化を簡素化する強力なツールです。これにより、Reactコードの記述が容易になり、手動による最適化手法に伴う複雑さと混乱が軽減されます。ReactCompilerは現在安定バージョンではありませんが、Reactの将来の重要な部分になることが約束されています。これにより、Reactコードの記述が容易になり、手動による最適化手法に伴う複雑さと混乱が軽減されます。ReactCompilerは現在安定バージョンではありませんが、Reactの将来の重要な部分になることが約束されています。
複雑さに対処せずにReactのパフォーマンスを最適化したい場合は、今すぐReactCompilerを試して、近い将来の安定バージョンを楽しみにしてください。
参照：