React Compiler導入の効果と運用の工夫

useMemo/useCallbackまだ書いてる？React Compilerで変わった開発体験
https://offers-jp.connpass.com/event/391554/
での登壇資料です

Transcript

1. ©KAKEHASHI inc. 2026/05/20 株式会社カケハシ 大村 洋平 #Offers_DeepDive useMemo/useCallbackまだ書いてる？React Compilerで変わった開発体験 React Compiler導入の効果と運用の工夫
2. ©KAKEHASHI inc. 2 自己紹介 Yohei Omura (@_y8a_) 株式会社カケハシ ソフトウェアエンジニア 医療系SaaS開発のソフトウェアエンジニアとして フロントエンドを主軸に開発に携わっています
3. ©KAKEHASHI inc. 3 はじめに React Compilerとは • Reactコードのビルド時に自動で最適化（メモ化）してくれるコンパイラ • これまで開発者がパフォーマンスチューニングのために手動で書いていた useMemo , useCallback , React.memo の記述が不要になる 2025年10月に安定版(v1.0)がリリースされ、公式ドキュメントには 「現在、すべての方に React Compiler の使用を開始することをお勧めします」 と記載されている https://ja.react.dev/learn/react-compiler/introduction
4. ©KAKEHASHI inc. なぜReact Compilerを 導入しようと思ったか 4
5. ©KAKEHASHI inc. 5 なぜReact Compilerを導入しようと思ったか 導入の背景 • 昨年、新規プロダクトのフロントエンド開発立ち上げを担当することに • 開発環境を整えていく中で、以前から気になっていたReact Compilerの ことを思い出す
6. ©KAKEHASHI inc. 6 なぜReact Compilerを導入しようと思ったか プロダクト開発初期段階の今であれば、 • 今後長期間にわたって恩恵を受けられる可能性 • コードの分量が少ないので問題が起こった時に気付きやすい • 試行錯誤しやすく、知見を溜めやすい
7. © KAKEHASHI Inc. All Rights Reserved. 導入してみよう！
8. ©KAKEHASHI inc. 8 事前に行ったこと 互換性のチェック • ヘルスチェック( react-compiler-healthcheck)を実行 ◦ → 互換性の問題はなく、全コンポーネントに適用可能であるとの結果が出た https://github.com/facebook/react/issues/35772 これから導入する場合は、公式の手順に従い、 eslint-plugin-react-hooks を利用することが推奨されている • React のルールの違反の特定 • 最適化できないコンポーネントの表示 • 問題の修正に役立つエラーメッセージの提供
9. ©KAKEHASHI inc. 9 導入 プラグインをインストールしてconfigに書くだけでOK ※Viteの場合の例。他の場合は公式ドキュメント参照
10. © KAKEHASHI Inc. All Rights Reserved. 導入完了！
11. ©KAKEHASHI inc. 11 メモ化適用の確認 コンパイルしたReactアプリを起動して開発者ツールで確認 → 「Memo✨」バッジがつき、多くのコンポーネントがメモ化されている Chrome拡張のReact Developer Toolで確認
12. ©KAKEHASHI inc. 導入の効果 12
13. ©KAKEHASHI inc. 13 私が考える導入の効果 ① パフォーマンスの向上 ② 開発者体験の向上
14. ©KAKEHASHI inc. 14 効果1：パフォーマンスの向上 ソースコード全体が自動でメモ化されることにより • 不要な再レンダリングの抑制 ◦ React Developer Toolsの再レンダリングのハイライト機能を通して、不要な コンポーネントの再レンダリングが減少していることが確認できた • レンダリング処理自体の高速化 ◦ 効果の大きいところで30ms程度の改善だった ◦ プロジェクトの規模が小さかったため僅かに速くなったと感じられる程度
15. ©KAKEHASHI inc. 15 効果2：開発者体験の向上 • メモ化に関する意思決定が不要になる ◦ どのような場合にメモ化すべきかの判断が不要になる ◦ 方針がブレることがなくなるため、レビューコストが下がる • メモ化のためのコード自体が不要になる ◦ useMemo などを書く手間の削減 ◦ 可読性の向上 メモ化に関することはReactに任せられるようになった
16. ©KAKEHASHI inc. 導入時に発生した問題 16
17. ©KAKEHASHI inc. 17 テストの失敗により不具合を検知 導入後にインテグレーションテストを実行したところ、 フォームのバリデーションエラーがUIに反映されないなどの不具合を検知
18. ©KAKEHASHI inc. 18 何が起こっていたか Reactのルールに違反すると正しく機能しない React Compiler は Reactのルール に従うコードを処理するように設計されている • ❌違反の例： props と state は直接書き換えてはいけない Reactのルール (Rules of React) ： 自然な React コードを書くために従うべきルールのこと https://ja.react.dev/reference/rules
19. ©KAKEHASHI inc. 19 何が起こっていたか 今回の場合、一部のライブラリでReactのルールに違反する振る舞いがあった • TanStack Query ( useInfiniteQuery ) ◦ → 「props と state はイミュータブル」の違反 • React Hook Form ( formState へのアクセス) ◦ → 「副作用はレンダーの外で実行する」の違反
20. ©KAKEHASHI inc. 20 TanStack Queryの場合 「props と state はイミュータブル」の違反 useInfiniteQuery フックでは返却済みの data オブジェクトの参照を保っ たまま、中身を書き換える更新経路が存在する → 参照はそのままで、propsの中身が差し替わることがある React Compiler は参照が同じなら中身も同じとみなしてキャッシュを再利用 するため、古い値が表示されてしまう
21. ©KAKEHASHI inc. 21 React Hook Formの場合 「副作用はレンダーの外で実行する」の違反 formState.isDirty というプロパティを読み取る時に Proxy の get ハンドラ経由で購読登録の副作用を発生させている → レンダリング中の値の読み取りに副作用が発生している React Compiler がキャッシュから値を返してアクセス自体をスキップすると、 動作に必要な副作用もスキップされてしまう
22. ©KAKEHASHI inc. 22 どうすればいいか？ 原則はReactのルールに従うこと • チームで書いたコードであればReactのルールに従うように修正する • 使用しているライブラリがルール違反している場合には use no memo ディレクティブを書いて、部分的に自動メモ化をオプトアウトする
23. ©KAKEHASHI inc. 23 use no memoの取り扱い use no memo の適用ルールを明文化 作成したルールは以下のように活用 • レビュー時や動作確認で人が参照する • 生成AIにルールとして参照させて、 コード生成時に適用されるようにした use no memoに関する判断を 極力しなくて済むように仕組み化
24. ©KAKEHASHI inc. まとめ 24
25. ©KAKEHASHI inc. 25 React Compilerを導入してみて 良かったこと • React Compilerの導入は非常に簡単 • メモ化をReactに任せることができ、開発者体験向上が感じられた 注意が必要だったこと • Reactのルール違反がある場合は挙動が変わる恐れがある • テストを準備し、挙動の変化を検知できるようにしておく • use no memoで回避する場合はルールを明文化しておく