はじめに

React Compilerが先日、オープンソース化されました。
ReactCompilerは、Reactのパフォーマンスと開発者体験を向上させることができるもので、具体的には、コンポーネントの最適化、不要な再レンダリングの削減、コード分割の改善などを行います。
React 19と連携し、Babelプラグインを介して使用されます。Next.js、Remix、Webpack、Expo、React Nativeなどのフレームワークやツールと統合できます。
React 19はまだベータ版としてしか提供されておらず（執筆時点）、ReactCompilerも公式によるとまだ変わるからね、とか、一時的なもので最終的にはこの記述も不要になるからねと書いてたりするのでご注意ください。

元ソースは下記です。

■GitHub
https://github.com/facebook/react/tree/main/compiler

■公式ドキュメント

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

React Compilerが解決するもの

今までuseMemoやuseCallbackを使って値や関数をキャッシュし、再レンダリングを制御することでパフォーマンスを最適化するということができました（今も）。
しかし、これらのフックは、以下のような課題を抱えていました。

・複雑な計算を行っていない場合や、依存性配列の値が頻繁に変化する場合はパフォーマンスが低下する可能性がある
・メモリ使用量が増加する可能性がある
・アプリケーションがメモ化を必要としない可能性がある
・値が頻繁に変化するコンポーネントでは意味がなく、オーバーヘッドが生じる可能性がある
・コードの可読性が低下する可能性がある

React Compilerは、これらの最適化を自動的にコンパイラーとして実行させることで開発者の負担軽減とアプリケーションのパフォーマンスの向上を実現することができるようにします。
　

使い方

まずは事前準備です。reactのプロジェクトを作成します。※TypeScriptも使う場合は「--template typescript」オプションを付与

npx create-react-app react-compiler-test

本記事執筆時点では18.2.0のreactとreact-domがインストールされますが、React Compiler を使用するにはReact 19 Betaが必要です。下記コマンドでアップデートしてください。

npm install react@beta react-dom@beta

package.jsonのdependenciesにあるreactとreact-domが19にアップデートされているか確認してください。

  "dependencies": {
    "react": "^19.0.0-beta-26f2496093-20240514",
    "react-dom": "^19.0.0-beta-26f2496093-20240514"
  },

互換性の確認

コンパイラーをインストールする前に、コードベースに互換性があるかを確認できます。

npx react-compiler-healthcheck

※実行結果

Successfully compiled 1 out of 1 components.
StrictMode usage found.
Found no usage of incompatible libraries.

eslint-plugin-react-compiler をインストールする

React Compilerはeslintプラグインも強化することができ、プラグインはRact Compilerとは独立して使用できるそうです。

npm install eslint-plugin-react-compiler

インストールしたら、eslint構成の設定ファイルで該当部分を以下記述へ修正します。

module.exports = {
  plugins: [
    'eslint-plugin-react-compiler',
  ],
  rules: {
    'react-compiler/react-compiler': "error",
  },
}

※ほかにもNext.jsやBabel、Vite、リミックスなどで利用できます（https://react.dev/learn/react-compiler#usage-with-nextjs）。

デバッグ

Reactの開発ツール「React Devtools(v5.0+)」に、Reactコンパイラーのサポートが組み込まれているため、それを使ってコンポーネントが最適化されているかどうかを確認することが可能です。
コンパイラーによって最適化されたコンポーネントの横に「メモ ✨」バッジが表示されます。

　※その他のissueはこちら

終わりに

メモ化は個人的に、そこまでパフォーマンスを気にするプロジェクトを対応することが今までなかったため、割と使用を後回しにしてきていた部分だったのですが、これによって（何をどうすればどうなるという部分を理解・意識しないとというのは前提として）意識をせずに、今まで通りのReactのルールに則って、各コンポーネントを書いていけばよくなったのは非常にありがたいことですね。早く安定版がリリースされることを待ちましょう！

それではまた。

HTNCode