useMemo hook 是 React Hooks API 的一部分，在 React 16.8 中引入，旨在透過記住昂貴計算的結果來優化效能。詳細解釋如下：

什麼是 useMemo？

useMemo 是一個傳回記憶值的鉤子。它允許您快取計算結果，以便不必在每次渲染時重新計算，除非其依賴項發生變化。這可以幫助防止不必要的重新渲染並提高 React 應用程式的效能。

句法

const memoizedValue = useMemo(() => {
  // computation or expensive calculation
  return value;
}, [dependencies]);

參數

1. 函數（回呼）：傳回要記憶的值的函數。
2. 依賴項數組：依賴項數組，當更改時，將導致重新計算記憶值。如果此陣列為空，則該值只會計算一次（如 componentDidMount）。

它是如何運作的

• 在初始渲染時，useMemo 將運行提供的函數並傳回其結果，該結果儲存在 memoizedValue 中。
• 在後續渲染中，React 將檢查是否有任何相依性發生變更。如果沒有，它將返回快取的值而不是重新計算它。
• 如果任何依賴項發生變化，React將再次執行函數，更新快取值，並傳回新值。

例子

下面用一個簡單的例子來說明useMemo：

import React, { useState, useMemo } from 'react';

const ExpensiveComponent = ({ number }) => {
  const computeFactorial = (n) => {
    console.log('Calculating factorial...');
    return n  computeFactorial(number), [number]);

  return (
    

      
Factorial of {number} is {factorial}
    
  );
};

const App = () => {
  const [num, setNum] = useState(0);

  return (
    

       setNum(num   1)}>Increase Number
      
  );
};

export default App;

何時使用 useMemo

• 昂貴的計算：當您的計算在性能方面很昂貴並且只需要在特定輸入發生變化時重新計算時，請使用 useMemo。
• 避免不必要的渲染：如果將物件或陣列作為 props 傳遞給子元件，則可以使用 useMemo 來確保它們不會在每次渲染時重新創建，從而防止不必要的重新渲染。

重要考慮因素

• 效能：過度使用 useMemo 可能會導致程式碼更複雜，並且可能無法總是帶來效能優勢。最好將它用於真正昂貴的計算。
• 函數重新建立：如果您正在記憶函數，請小心，因為除非包裝在 useCallback 中，否則函數定義仍將被重新建立。

結論

useMemo 是 React 中的一個強大工具，用於透過記憶值來最佳化表現。它可以幫助確保僅在必要時執行昂貴的計算，從而提高 React 元件的效率。但是，應該謹慎使用它，以避免程式碼中不必要的複雜性。