React 效能瓶頸怎麼辦？用 useMemo 加速你的組件渲染！

useMemo 的基本概念與工作原理

useMemo 是 React 內建的 Hook，專門用於記憶（memoize）計算結果。它能夠緩存函數的返回值，避免在每次渲染時重複執行昂貴的計算。useMemo 接受兩個參數：一個計算函數和一個依賴項陣列。當依賴項保持不變時，React 會直接返回先前緩存的值；只有當依賴項發生變化時，計算函數才會重新執行。

const memoizedValue = useMemo(() => {
  // 進行昂貴的計算
  return computeExpensiveValue(a, b);
}, [a, b]); // 依賴項陣列

在上述代碼中，只有當 a 或 b 改變時，computeExpensiveValue 函數才會被重新調用。這種機制極大地減少了不必要的計算，提高了組件的渲染效率。

useMemo 的主要優勢

Long exposure photography of road and cars (Marc-Olivier Jodoin)

優化效能表現

useMemo 的首要優勢是能夠提升應用效能。通過避免重複執行耗時的計算，useMemo 減少了不必要的處理時間，使應用響應更加迅速。

// 未使用 useMemo 的例子
const expensiveCalculation = (num) => {
  console.log("計算中...");
  for (let i = 0; i < 1000000000; i++) {
    num += 1;
  }
  return num;
};

// 使用useMemo的優化版本
const memoizedCalculation = useMemo(() => {
  return expensiveCalculation(count);
}, [count]);

在上例中，只有當 count 變化時，昂貴的計算才會執行，大大提高了效能。

避免不必要的重新渲染

React 組件在狀態或屬性變化時會重新渲染。若渲染過程中包含昂貴的計算，可能導致用戶體驗下降。使用 useMemo 可以避免這種情況，確保只在必要時進行計算。

有效管理衍生數據

在處理從狀態或屬性派生的數據時，useMemo 能確保衍生計算只在依賴項變化時執行，優化了數據處理流程。例如，對列表進行排序或過濾時，使用 useMemo 可以避免在每次渲染時重新處理整個數據集。

提升用戶體驗

通過減少計算開銷和提高響應速度，useMemo 直接改善了用戶體驗。快速的響應和流暢的交互是良好用戶體驗的基礎，而 useMemo 在這方面發揮了重要作用。

useMemo 的實際應用場景

優化耗時計算

useMemo 最典型的應用是優化耗時的計算過程，如複雜的數學運算、大量數據的處理等。

function CalculateFactorial() {
  const [number, setNumber] = useState(1);
  const factorial = useMemo(() => factorialOf(number), [number]);

  // 組件其餘部分
}

在這個例子中，階乘計算只在 number 變化時執行，避免了不必要的重複計算。

數據過濾與排序

當需要對大型數據集進行過濾或排序時，useMemo 能有效提升效能。

function BlogPosts({ posts, searchQuery }) {
  const filteredPosts = useMemo(() => {
    return posts.filter((post) =>
      post.title.toLowerCase().includes(searchQuery.toLowerCase())
    );
  }, [posts, searchQuery]);

  // 組件渲染代碼
}

這裡，只有當 posts 或 searchQuery 變化時，過濾操作才會重新執行。

API 響應緩存

useMemo 可用於緩存 API 響應，避免在每次渲染時重複請求或處理數據。

function UserData({ query }) {
  const apiData = useMemo(() => {
    return fetchDataFromAPI(query);
  }, [query]);

  // 使用 apiData 渲染 UI
}

分頁與數據顯示

在實現分頁功能時，useMemo 可以緩存已加載的頁面數據，提高翻頁時的響應速度。

const paginatedData = useMemo(() => {
  const startIndex = (currentPage - 1) * itemsPerPage;
  const endIndex = startIndex + itemsPerPage;
  return data.slice(startIndex, endIndex);
}, [currentPage, data, itemsPerPage]);

useMemo 與 useCallback 的比較

雖然 useMemo 和 useCallback 都用於優化效能，但它們有明顯的區別：useMemo 返回一個記憶化的值，而 useCallback 返回一個記憶化的函數。

// useMemo 記憶計算結果
const memoizedValue = useMemo(() => computeValue(a, b), [a, b]);

// useCallback 記憶函數本身
const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

使用正確的 hook 對應正確的場景是優化 React 應用的關鍵。

最佳實踐與注意事項

使用 useMemo 時，應注意以下幾點：

1. 不要過度使用：只在處理耗時計算時才使用 useMemo，避免為簡單操作增加不必要的複雜性。

2. 正確設置依賴項：確保依賴項列表包含計算函數中使用的所有反應性值（如 props、state 等）。

3. 理解效能影響：在應用變得緩慢時，使用 React Profiler 分析效能瓶頸，有針對性地應用 useMemo。

lodash 的 memoize

在 JavaScript 中，我們也可以使用 lodash 的 memoize 函數來實現類似的記憶化功能。

import _ from "lodash";

// 使用 lodash 的 memoize 函數來優化複雜計算
const memoizedFactorial = _.memoize((n: number): number => {
  if (n <= 1) return 1;
  return n * memoizedFactorial(n - 1);
});

透過使用 memoize，我們可以避免在每次呼叫時都進行耗時的計算，進而提升應用的效能。

React 19 中的效能優化：深入淺出 memo

React 19 保留了廣受歡迎的 memo 函式，為開發者提供了強大的效能優化工具。memo 的核心功能是避免函式型組件在 props 保持不變時進行不必要的重新渲染，特別適用於那些需要頻繁更新但大部分 props 保持穩定的場景。

memo 的基本使用

在 React 19 中，memo 的基本語法保持不變：

const MemoizedComponent = memo(MyComponent);

這樣簡單的包裝就能讓 React 跳過對 MyComponent 的重新渲染，除非其 props 發生變化。

自定義比較邏輯

對於更精細的控制，開發者可以提供自定義的比較函式：

const MemoizedComponent = memo(MyComponent, (prevProps, nextProps) => {
  return prevProps.id === nextProps.id && prevProps.name === nextProps.name;
});

這個例子中，只有當 id 或 name 改變時，組件才會重新渲染。

memo 與 Server Components

React 19 的一大亮點是對 Server Components 的完整支持。memo 在這個新架構中扮演著重要角色，能夠顯著減少客戶端的渲染負擔，提升應用整體效能。

最佳實踐

1. 純粹組件：memo 最適合用於純粹的函式組件，即渲染輸出完全由 props 決定的組件。
2. 與 useCallback 配合：在傳遞函式作為 props 時，搭配 useCallback 使用可以進一步優化效能。
3. 適度使用：不要過度使用 memo。對於簡單的組件或經常變化的組件，memo 可能會引入不必要的複雜性。
4. 效能測試：使用 React DevTools Profiler 來衡量 memo 的實際效能提升。

React 19 中的 memo 不僅保留了其強大的優化能力，還在新的架構下展現出更卓越的效能。透過正確使用 memo，開發者可以顯著提升 React 應用的響應速度和整體用戶體驗。

結論

Rahul Mishra (Rahul Mishra)

useMemo 是 React 中優化效能的強大工具，通過記憶化計算結果，避免不必要的重複計算，顯著提升應用效能。在處理耗時計算、大型數據集過濾排序、API 響應緩存等場景中，useMemo 能發揮重要作用。合理使用 useMemo，結合對 React 渲染機制的深入理解，能幫助開發者構建高效、流暢的 React 應用。

然而，開發者也需謹慎使用 useMemo。過度使用可能導致代碼複雜性增加，反而影響應用的可維護性。因此，建議在實際開發中權衡效能提升與代碼複雜度，只在確實需要的地方應用 useMemo。

最後，隨著 React 的不斷發展，效能優化策略也在不斷演進。開發者應持續關注 React 的最新動態，並根據具體應用場景選擇最適合的優化方法。useMemo 作為 React 工具箱中的重要一員，將繼續在前端效能優化中扮演關鍵角色。