前言

我們昨天介紹了 Hooks 中比較常用的 UseState 跟 UseEffect，那我們今天繼續接著介紹另外一種類型的 Hooks - Memorized Hook

Memorized Hook

適用時機：

• 不需要常常被 render 的元件或 Function
• 執行速度慢的 Function

useMemo

兩個參數，第一個接函式、第二個接 Dependency []，如果沒有給依賴陣列每次都會重新 Render

會 Return 一個 memorized value

const Demo = () => {
    const [number, setnumber] = useState(0);
    // 兩個參數，第一個接函式、第二個接 Dependency []，如果沒有給依賴陣列每次都會重新 Render
    // 當第二個依賴陣列改變時， useMemo 才會重新 Render
    useMemo(() => { spendLongTimeFunction(number);}, [number])
}

useCallback

兩個參數，第一個接函式、第二個接 Dependency []，如果沒有給依賴陣列每次都會重新 Render

const Demo = () => {
    // useCallback 跟 useMemo差異在於可以 
    // useCallback 互叫時可以帶參數如： callback(add)，其回傳是整個函式 
    // useMemo 回傳是函式的值
    const callback = useCallback((add) => {
        spendLongTimeFunction(number+ add);
    },[number])
}

參考資料

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