React Hooks useMemo 筆記與範例

本文紀錄useMemo的重要概念及使用範例。

一、useMemo重要概念

useMemo與React.memo的差別在於：useMemo 記住計算結果，不需要在每次渲染時都重複執行獲得一樣的結果；而React.memo 記憶組件，可以瀏覽這篇文章，了解更多關於React.memo的概念。

useMemo與useCallback的差別在於：useMemo 記住函數輸出的結果，給我們調用函數的結果；而useCallback 記憶函數本身，給我們稍後可以調用的符合referential equality的函數，可以瀏覽這篇文章，了解更多關於useCallback的概念(包含什麼是Referential Equality?)。

useMemo使用方式及運作規則

const result = useMemo(() => expensiveFn(number), [number]);

useMemo 提供了函數的結果記憶，如果值沒有變動不需要每次都重新計算。當我們使用 useMemo 時，我們實際上多用在回傳的值非primitive value時。

二、useMemo使用範例

(一)程式碼

1.使用useMemo前

2.如何使用useMemo及useCallback解決

即使在Input中輸入資料變動userInput state，因記住回傳的Array，因此也不會引發useEffect的運行。

左為使用useMemo前，右為使用useMemo後

三、推薦影片

React Hooks useMemo Tutorial