React Compilerとは

React Compilerは、Metaが開発した新しいコンパイラで、ビルド時のみに実行されるツールであり、Reactアプリを自動的に最適化してくれます。

https://ja.react.dev/learn/react-compiler

React Compilerの特徴

React Compilerの一番大きな機能としては、useMemoやuseCallback、React.memoを使わずとも、パフォーマンスの最適化をしてくれる機能かと思います。
メモ化は適用し忘れたり、誤って適用したりしてしまうことも多いので、その部分を意識しなくていいというのは、神機能だと思います。

インストール

インストールは以下のコマンドになります。

以下は、React Compilerが提供しているESLintプラグインをインストールするコマンドです。
ESlintプラグインはコンパイラとは独立して使用できるため、コンパイラを使用しなくてもESLintプラグインだけで活用することもできます。

導入手順

viteのconfigファイルに以下を追記

サンプルコード

動きの違い

React Compilerを使っている場合と、使っていない場合のコンソールの出力を見てみましょう。

React Compilerを使っていない場合

「TestComponent」がメモ化されていないため、ボタンをクリックするたび、「Rendered」がコンソールに出力される。

React Compilerを使っている場合

自動でメモ化され、ボタンをクリックしても、「Rendered」がコンソールに出力されない。