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

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

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

# インストール
インストールは以下のコマンドになります。
![img](/mosaic-code.jpg)
以下は、React Compilerが提供しているESLintプラグインをインストールするコマンドです。
ESlintプラグインはコンパイラとは独立して使用できるため、コンパイラを使用しなくてもESLintプラグインだけで活用することもできます。
![img](/mosaic-code.jpg)

# 導入手順
viteのconfigファイルに以下を追記
![img](/mosaic-code.jpg)
![img](/mosaic-code.jpg)
# サンプルコード

![img](/mosaic-code.jpg)

![img](/mosaic-code.jpg)

# 動きの違い
React Compilerを使っている場合と、使っていない場合のコンソールの出力を見てみましょう。
## React Compilerを使っていない場合
「TestComponent」がメモ化されていないため、ボタンをクリックするたび、「Rendered」がコンソールに出力される。

![React Compiler Demo2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/7cba970e-cf4c-d49b-070a-507469b73752.gif)


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

![React Compiler Demo.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/a50b68d4-44fe-2b2a-26b1-ed623de1faff.gif)



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

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

# 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 Demo2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/7cba970e-cf4c-d49b-070a-507469b73752.gif)


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

![React Compiler Demo.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/a50b68d4-44fe-2b2a-26b1-ed623de1faff.gif)



React Compilerとは

React Compilerの特徴

続きを読むには単価診断を受けてください（30秒）