Zenn
📝

君たち、まだuseMemoとかuseCallback書いてるの？

に公開
Next.js
React
compiler
tech

煽りタイトルすいません。
最近「React Compiler がもう実戦投入できるレベル」という噂を耳にしたので、
Next.js 15 + React 19 で触ってみた結果を Zenn 記事にまとめました。

TL;DR

  • メモ化(useMemoやuseCallback)はReact Compilerを使えば考えなくていい。
  • React Compilerはexperimentalだけど、
    少なくとも個人開発や小規模プロジェクトなら十分“アリ”だと感じた。
  • 設定は３分で完了するからおすすめだよ。

そもそも...useMemoとかuseCallbackって？

重い処理部分に対して、パフォーマンスを最適化する（= ”メモ化する”）ために使うもの。

Hook 目的 典型的な使いどころ
useMemo 重い計算結果 をキャッシュして再計算を防ぐ ①巨大配列の filter/sort
②数千行テーブルのレンダリング前整形
useCallback 関数の参照の安定化（＝再レンダリング抑制） ①下位コンポーネントに関数 props を渡す
②依存配列に関数を入れたい

以下は試しに、関数propsをuseCallbackで、コンポーネントをReact.memoで
メモ化したケースを書いたもの。
メモ化していないコンポーネントは親の再レンダリングの影響を受けて
レンダリング回数がインクリメントされているのが分かるかと思う。

（useMemoの話してたのに、React.memoのexampleにしてしまったのはご愛嬌。😇）

React Compilerでどう変わるか？

React Compilerとは、React チームが新たに公開した ビルド時コンパイラ で、
Reactアプリを自動的に最適化するビルド時専用のツール。

要はuseMemoやuseCallbackなどでメモ化をしていなくても、自動で最適化してくれる。

先述のコード例に対してReact Compilerを適用したケースを見てみよう。
メモ化していないコンポーネントは親のレンダリングの影響を受けて再レンダリングしていた。
が、React Compilerをオンにすると、、
メモ化していなくても子が再レンダリングしていないのが確認できた！

補足：検証した環境

Tool Version
Next.js 15.3.1
React / React-DOM 19.1.0

3分でできる！ React Compilerの設定方法

※前提、React19系、Next15系の前提で話します。

①babel-plugin-react-compilerをインストール

npm install babel-plugin-react-compiler

②next.config.tsに追記

import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  experimental: {
    reactCompiler: true,  // ←これ
  },
}
 
export default nextConfig

以上！！！

参照）
https://nextjs.org/docs/app/api-reference/config/next-config-js/reactCompiler

※ちなみに、ビルド時に最適化するツールなので、ローカルで確認したい場合、
npm run devではなく npm run build → npm run startによって確認できるよ。

※補足：
自動最適化を部分的に外す"use no memo"というオプションがあるけど、これはまだ試せてない。
これちゃんと使えるなら、仮にReact Compiler関連で不具合起きても、
そこだけ"use no memo"で外せるのでありがたい。

さいごに

ここまで読んでくれたあなたは、もう“手動メモ化”を卒業する準備万端。
今日からはコンパイラに丸投げして、コードを書く指先に全集中しよう。

P.S.
実はこの記事が僕の Zenn 初投稿です。
間違い指摘も応援や感想も、
“花を愛でるように、彼女と接するかのように優しく”していただけないだろうか。
お願いします。
（え？ 彼女いない？ ─ 大丈夫、それは私と同じstate😌）
（そんなstateはメモ化せずゴリゴリに再レンダリングしていきたいが。）

それでは── Happy Compiling & May the FPS be with you!

Discussion