本文介紹 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 分析 & 差別

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

回顧

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

• useMemo Hook

References

• React - The Complete Guide (incl Hooks, React Router, Redux)