# React Hook - useMemo

###### tags: `Javascript, React`

# useMemo 基本使用時機

使用 useMemo 因為它會幫你追蹤的項目儲存在記憶體中，因為你每次使用 useMemo 都是在使用額外的記憶體空間

通常用在

1. 有個函式跑的超級慢影響整體效能
2. referential equlity

# really slow calculation

當你在程式碼中有寫到一個特別慢的 function 時，就可以針對它使用 useMemo，如此一來就只會在操作那個函式時才會變慢，而不會拖到整個瀏覽器的動作


簡單解釋一下下方程式碼

* input 的部分處理讓數字增減為呈現下方的數字會變成兩倍
* change theme 則會讓下方格子變成黑色或是白色主題
* slowFunction 是一個包含 for 跑非常多次很耗效能的函式，當操作所有頁面上的功能都會非常慢

function App() {

  const [number,setNumber] = useState(0);
  const [dark,setDark] = useState(false);
  const doubleNumber = slowFunction(number);
  const themeStyles = {
    backgroundColor: dark ? 'black' : 'white',
    color:dark ? 'white': 'black'
  }

  return (
    <div className="App">
      <input type="number" value = {number} onChange={e =>setNumber(parseInt(e.target.value))}></input>
      <button onClick = {() =>setDark(prevDark => !prevDark)}>Change theme</button>
      <div style={themeStyles}>{doubleNumber}</div>
    </div>
  );
}

function slowFunction(num){
  console.log('call slow function');
  for(let i=0; i<1000000000; i++ ){}
  return num*2;
}

export default App;

## 處理方法

所以我們直接把 useMemoe 包裹著 slowFunction 並且追蹤放進去的 number state

  const doubleNumber = useMemo(()=>{
      returm slowFunction(number
      )},[number])

經過這段處理後會發現

1. 當點擊 change theme 時候的速度變正常不會被拖慢了
2. 但是牽扯到數字的部分舊照

# Referential equlity

> useMemo 可以確保物件或是陣列的 reference 會是一樣的

為了做測試我們對程式碼加上 useEffect 並且追蹤 themeStyles

useEffect(()=>{
    console.log('Theme changed!')
  },[themeStyles])

理想來說應該當我們點擊 change theme 時，才會觸發那段文字，但是實際情況卻是

當我點擊數字改變時一樣會觸發文字

原因在於這邊 themeStyles 的 reference 改變了，因此 useEffect 偵測到改變因此執行內部函式

這個情況就是每次我們使用函式都會取得一個新的 themeStyles ，物件儘管內容一樣，卻是不一樣的 reference 因此觸發了 useEffect

## 處理方法

為了解決這樣的情況就可以使用 useMemo 並且追蹤變數 dark ，這樣一來 themeStyles 這個物件就會被記憶起來，所以只有它真的被修改的時候才會觸發 useEffect

const themeStyles = useMemo(() =>{
      return{
      backgroundColor: dark ? 'black' : 'white',
      color:dark ? 'white': 'black'
    }},[dark])

如此一來我一直觸發數字上面的改變也不會觸及 themeStyles 那邊的改動摟！


# 何時適合使用 useMemo

https://react.dev/reference/react/useMemo#should-you-add-usememo-everywhere

1. 要擺入的計算，非常顯著的慢以及其 dependencies 不太容易改變