Back To Articles

Introducing useMemo

🧑🏻‍💻 海豹人 Sealman 📅 December 17, 2021

#react
Article Image

本文介紹 useMemo 的使用方式。

useMemo - React 官方文件

useMemo Hook

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

// 使用 useMemo 來記憶陣列
const sortedList = useMemo(() => {
  console.log("Items sorted");
  // Return what you want to store
  return items.sort((a, b) => a - b);
}, [items]);

// empty dependency => never change
const items = useMemo(() => {
  return [5, 3, 1, 10, 9];
}, []);

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

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

useCallback 與 useMemo 的差異

useCallback、useMemo 分析 & 差別

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

回顧

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

  • useMemo Hook

References