[React Hook 筆記] Memorized Hook- useMemo, useCallback

把東西用 useMemo/useCallback 存起來就不用每次重新 render 拖慢效能

(新增 typing 於 2023/11/7)

React Hook 系列文

1. 從最基本的 Hook 開始 useState, useEffect
2. Memorized Hook- useMemo, useCallback
3. useRef
4. useContext
5. useReducer
6. useLayoutEffect
7. Custom Hooks

圖改編自 kevinwkds.medium.com

至從 React Hook 興起，網路上多數文章都只介紹 useState 跟 useEffect，但明明 Hook 還有很多別的，所以這篇想先從比較少看到的 Memorized Hook 開始。若 useState 跟 useEffect 都很不熟可以先閱讀 從最基本的 Hook 開始 useState, useEffect 再回來看此篇

🔖 文章索引
1. Memorized Hook 在幹嘛?
2. useMemo
3. useCallback
4. useCallback 跟 useMemo 有什麼不同
5. Typing useCallback/useMemo
6. 結論

Memorized Hook 在幹嘛?

memoization between re-renders

顧名思義就是把東西存起來就不用每次都重新運算執行， 最常使用的情境就是當 function 符合以下三點

• 執行速度很慢 (Expensive function or expensive calculation)
• 不需要常常再被 render over and over again，變動性不大
• Pure function (每次被呼叫 output 都會一樣)

// 此函式就符合以上三點
function slowFunc(num) {
  // 執行速度很慢
  for (let i=0; i<=1000000; i++) {}
  return num*2;
}
const doubleNum = slowFunc(1); // 2