昨天 React.memo 比較像是針對 component 做 memorization，今天要介紹的 useMemo 這個 hooks 則是可以對函式實作 memorization。如果前一次與後一次回傳結果一樣就不會重新呼叫，也是 React 效能優化的利器。

實作方式

const computeLetterCount = word => {
    let i = 0;
    while (i < 9999999) i++;
    return word.length;
};

const letterCount = useMemo(() => computeLetterCount(word), [word]);

以上是一個非常耗費時間成本的函式，在使用 useMemo 以前，只要呼叫到這個函式可能都會造成幾秒的延遲，因為我們故意讓他跑了一個沒什麼意義的迴圈。

再來看看 useMemo 的使用方法，可以看成我們對函式 return 的結果做 memorization ，他使用的方式看起來是不是跟 useEffect 又有 87 分像呢？
關鍵在於第二個參數，該參數是一個陣列，代表當陣列中的值沒有變動時，將不會再呼叫一次函數，而是以類似快取的方式把上一次執行的結果拿來用，以此避免不必要的計算。

來看看 React 官網是怎麼說的：

Pass a “create” function and an array of dependencies. useMemo will only recompute the memoized value when one of the dependencies has changed. This optimization helps to avoid expensive calculations on every render.

You may rely on useMemo as a performance optimization, not as a semantic guarantee

我以非常簡短的篇幅介紹完 useMemo 這個 hooks，但我認為它是一把效能優化不可或缺的利器，memorization 也是軟體開發非常重要的概念，掌握它絕對是必須的喔！