React Hooks useCallback 筆記與範例
Published in
Jul 27, 2022
本文紀錄useCallback的重要概念及使用範例。
useCallback與useMemo的差別在於：useCallback記憶函數本身，給我們稍後可供調用的函數；而useMemo記住函數輸出的結果，給我們調用的函數的結果，可以瀏覽這篇文章，了解更多關於useMemo的概念。
一、useCallback重要概念
(一)什麼是Referential Equality?
後兩者(typeof Object)雖然看起來相同，但實際上占用不同的内存空间(不符合eferential equality)。
(二)Memorized Function
當 React 重新渲染組件時，會重新創建這些函數(因不符合referential equality)，即使他們看起來一樣。而useCallback為使用React的開發者返回一個memoized function的定義。
二、useCallback使用範例
(一)程式碼
1.使用useCallback前
2.引發無限loop的可能
3.如何使用useCallback解決
const sum = useCallback(() => num1 + num2, [num1, num2]);
const buildArray = useCallback(() => [num1, num2], [num1, num2]);
// 將num1, num2置於dependency array即使在Input中輸入資料變動userInput state，也不會再產生新的function，因此也不會引發useEffect的運行。
使用useCallback解決無限loop。
三、推薦影片
