[神機能]React Compilerに触れてみた

React Compilerとは

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

React Compilerの特徴

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

インストール

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

npm install -D babel-plugin-react-compiler

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

npm install -D eslint-plugin-react-compiler

導入手順

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

vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

const ReactCompilerConfig = {};

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: [["babel-plugin-react-compiler", ReactCompilerConfig]],
      },
    }),
  ],
});

import reactCompiler from 'eslint-plugin-react-compiler'

export default [
  {
    plugins: {
      'react-compiler': reactCompiler,
    },
    rules: {
      'react-compiler/react-compiler': 'error',
    },
  },
]

サンプルコード

App.tsx

import { useState } from "react";
import { TestComponent } from "./components/TestComponent";

function App() {
  const [count, setCount] = useState(0);

  return (
    <>
      <TestComponent 
        name={"Taro"} 
        onClick={() => console.log("click!")} 
      />
      <button onClick={() => setCount((prev) => prev + 1)}>
        {count}
      </button>
    </>
  );
}

export default App;

TestComponent.tsx

type Props = {
  name: string;
  onClick: () => void;
};

export const TestComponent = (props: Props) => {
  console.log("Rendered");
  return <div onClick={props.onClick}>Hello {props.name}</div>;
};

動きの違い

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

React Compilerを使っていない場合

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

React Compilerを使っている場合

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

最後に

他にも色々な記事を書いているので、よければ読んでいってください！