Zenn
😅

React Hooksの10種類を理解する（Additional: useMemo, useCallback）

2021/07/16に公開
React
React Hooks
tech

React Hooksの10種類を理解する（Basic: useMemo, useCallback）

そもそもmemoとは（memoization）

Memoization is an optimization technique that speeds up applications by storing the results of expensive function calls and returning the cached result when the same inputs are supplied again.

「メモ化」とは、高階関数の呼び出し結果を貯める（store）ことをしたり、同じ値が再度入力されたときにキャッシュされた結果を返したりすることによって、アプリのスピードを上げる最適化技術である。

  • 上記の通り、「メモ化」は一度計算された値を保存して再利用するための技術である。

plain javascript

  • 普通のJavascriptでこの「メモ化」を再現すると、例えば下記のようになる。
const memoFunc = (n: number) => {
  const cache = []; // キャッシュを格納する場所

  const func = (n: number) => {
    if (n in cache) {
      return cache[n];
    }

    if (n < 2n) {
      return n;
    }

    return cache[n] = func(n - 1n) + func(n - 2n);
  }

  return func(n);
}

この計算結果は、下記のようになる。

func(5): func(4) + func(3)
func(4): func(3) + func(2)
func(3): func(2) + func(1)
func(2): func(1) + func(0)

変数cacheを宣言することによって、ここに計算結果をstoreしていく。

ReactにおけるuseMemoとuseCallbackとの違い

  • Reactにおけるメモ化は2種類あり、useMemoは値を返す。useCallbackは関数を返す。
<!-- 基本構文 -->
const memo = useMemo(() => fn, deps);
const callback = useCallback(fn, deps);

const memoizedValue = useMemo(
  () => computeExpensiveValue(a, b), [a, b]
);

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

useMemo

  • useMemoは引数が変更されたときのみ再計算を行う。
  • useMemoに渡した関数はレンダー中に実行されるため、レンダー中に通常やらないような関数を入れず、例えばuseEffectなどに入れるのが良い。

useCallback

  • useCallbackは処理をメモ化できる。
  • useEffect内で度々使用される処理はuseCallbackに記載してメモ化しておくのが良い。

reference

GitHubで編集を提案

Discussion