Sean's Blog

An image showing avatar

Hi, I'm Sean

這裡記錄我學習網站開發的筆記
歡迎交流 (ゝ∀・)b

LinkedInGitHub

Introducing useMemo

本文介紹 useMemo 的使用方式。

useMemo - React 官方文件

useMemo Hook

useMemo 可以記憶任何 Type 的資料。通常用在重新渲染時,不希望某些「複雜計算」再次執行以優化效能,我們就可以用 useMemo 把這個資料記憶起來。

1// 使用 useMemo 來記憶陣列
2const sortedList = useMemo(() => {
3  console.log('Items sorted');
4  // Return what you want to store
5  return items.sort((a, b) => a - b);
6}, [items]);
7
8// empty dependency => never change
9const items = useMemo(() => {
10  return [5, 3, 1, 10, 9];
11}, []);
12

上述範例中,useMemo 記憶了 Array,但是同時它其實也佔用了記憶體。因此,useMemo 適合用於需要性能運算的資料上面。

1// 回傳一個 memoized 的值
2const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
3

useCallback 與 useMemo 的差異

useCallback、useMemo 分析 & 差別

結論上看,useCallbackuseMemo 都可以緩存函式的 Reference 或是緩存值,但是從更細的使用角度來說,我們偏好使用 useCallback 緩存函式的引用,而使用 useMemo 緩存計算資料的值。

回顧

看完這篇文章,我們到底有什麼收穫呢?藉由本文可以理解到…

  • useMemo Hook

References