React Compiler 完全攻略：自動優化讓你告別 useMemo 和 useCallback

還記得每次寫 React 都要糾結「這裡要不要加 useMemo」、「useCallback 的 dependency array 又忘記更新了」的日子嗎？React Compiler 來了，這一切都結束了。

作為一個寫了五年 React 的前端工程師，我可以很負責任地說：React Compiler 是自從 Hooks 發布以來，React 生態系最重要的一次進化。

React Compiler 是什麼？

React Compiler（前身叫 React Forget）是一個建置時工具（build-time tool），能自動分析你的 React 元件，並在編譯階段自動插入 memoization 優化。

白話文：你不用再手寫 useMemo、useCallback、React.memo 了，Compiler 會幫你搞定。而且它比你手寫的更精準——因為它能分析整個元件的依賴圖。

React Compiler v1.0 已於 2025 年 10 月正式發布，Meta 等大型公司已在生產環境中廣泛使用。到了 2026 年，它已經是 React 開發的標配。

為什麼需要 React Compiler

過去五年，區分資深與初級 React 開發者的一個重要指標就是「會不會正確使用 memoization」。但說實話，手動 memoization 有三個大問題：

1. 繁瑣：每個可能重新渲染的值都要包 useMemo
2. 容易出錯：dependency array 忘記加、加錯的情況太常見了
3. 增加維護成本：程式碼裡到處都是 useMemo/useCallback，看起來很雜亂

React Compiler 一次解決這三個問題。

安裝與設定

React Compiler 是獨立的可選工具，安裝 React 19 不會自動啟用它。你需要額外安裝：

# 安裝 React Compiler Babel 插件
npm install -D babel-plugin-react-compiler

# 如果你用 Vite
npm install -D vite-plugin-react-compiler

# ESLint 插件（強烈推薦）
npm install -D eslint-plugin-react-compiler

在 Babel 設定中啟用：

// babel.config.js
module.exports = {
  plugins: [
    ['babel-plugin-react-compiler', {
      // 可以指定最低 React 版本
      target: '19'
    }]
  ]
};

React Compiler 支援 React 17 以上的版本，所以即使你還沒升級到 React 19，也可以開始用。

實際效果：Before vs After

來看一個真實的例子。以前你可能會這樣寫：

// Before: 手動 memoization
function ProductList({ products, filter }) {
  const filteredProducts = useMemo(
    () => products.filter(p => p.category === filter),
    [products, filter]
  );

  const handleClick = useCallback(
    (id) => { console.log('clicked', id); },
    []
  );

  return (
    <ul>
      {filteredProducts.map(p => (
        <ProductItem
          key={p.id}
          product={p}
          onClick={handleClick}
        />
      ))}
    </ul>
  );
}

const ProductItem = React.memo(({ product, onClick }) => (
  <li onClick={() => onClick(product.id)}>{product.name}</li>
));

有了 React Compiler，你只需要這樣寫：

// After: React Compiler 自動優化
function ProductList({ products, filter }) {
  const filteredProducts = products.filter(
    p => p.category === filter
  );

  const handleClick = (id) => {
    console.log('clicked', id);
  };

  return (
    <ul>
      {filteredProducts.map(p => (
        <ProductItem
          key={p.id}
          product={p}
          onClick={handleClick}
        />
      ))}
    </ul>
  );
}

function ProductItem({ product, onClick }) {
  return <li onClick={() => onClick(product.id)}>{product.name}</li>;
}

程式碼更乾淨、更好讀，而且效能一樣好（甚至可能更好，因為 Compiler 的分析比人類更精準）。

React Compiler 的工作原理

React Compiler 在建置時會：

1. 分析每個元件的 JSX 結構和 state/props 依賴
2. 計算哪些值在 re-render 時會改變
3. 自動插入 memoization（類似 useMemo）在需要的地方
4. 跳過不必要的子元件渲染（類似 React.memo）

你可以在 React DevTools 中看到被 Compiler 優化的元件——它們的名稱旁邊會顯示「Memo ✨」徽章。

前提條件：Rules of React

React Compiler 不是魔法，它依賴你的程式碼遵循 React 的規則：

• 元件必須是冪等的：相同的 props、state、context 應產生相同的輸出
• Props 和 state 是不可變的：不要直接修改 props 或 state
• 副作用必須在渲染之外：用 useEffect 或 event handler

ESLint 插件 eslint-plugin-react-compiler 會幫你檢查這些規則，強烈建議安裝。

與 Next.js 的整合

如果你用 Next.js App Router（我猜你很可能在用），整合超簡單：

// next.config.js
module.exports = {
  experimental: {
    reactCompiler: true,
  },
};

一行設定就搞定。Next.js 已經內建了對 React Compiler 的完整支援。

想了解更多 Next.js 的功能，可以看看 Next.js Server Actions 最佳實踐和 Next.js App Router 遷移指南。

2026 年的最佳實踐

基於 React Compiler，2026 年的 React 最佳實踐已經更新：

• 完全避免手寫 useMemo/useCallback：讓 Compiler 處理
• 使用 use() hook 來暫停 Promise 或條件式讀取 Context
• 用 Server Actions 搭配 useActionState 處理表單
• Server Components 優先，Client Components 只用在需要互動的地方

如果你對 React 19 的其他新功能有興趣，推薦閱讀 React 19 新功能完整指南以及 React Server Components 教學。

結語

React Compiler 的出現讓 React 的效能優化從「專家技能」變成了「自動化配置」。這對整個生態系來說是好事——我們可以把更多時間花在建構功能和改善使用者體驗上，而不是糾結在 memoization 的細節裡。

如果你還沒試過 React Compiler，現在就是最好的時機。升級到 React 19，安裝 Compiler 插件，然後享受更乾淨的程式碼吧。