useMemoについて

UseMemoについての覚書です。

最初ドキュメントを見てuseCallbackとの違いがスッと入ってこなかったので、、
実際に使用してみたり、使用例とか見ると理解しやすいのですけどね。

公式ドキュメントにて useCallback(fn, deps) と useMemo(() => fn, deps) は等しいよ、と言われており、コード上の差異はそんなにありません。

UseMemoもuseCallbackも第二引数で渡す deps の値が変更された際
中身が再評価されます。

ただ、 useCallbackが関数を返す のに対し
useMemoは値を返す という違いがあり、その違いが２つを差別化する基準となってます。

useMemoの動き

useMemoはレンダリング中に第１引数で渡した関数を実行し、実行結果をキャッシュします。

// fanctional component
...
  const memoDate = useMemo(() => {
    return Date() 
  }, [])

  return (
    <div>date: {memoDate}</div>
  )

こちらは第２引数で渡した値が変更されない限り最初に実行された時と同じ結果を返します。
上の場合同じ日時を表示し続けます。
第２引数が空配列となっており、第２引数の値の変更は起こらない です。
なので 値が更新されずキャッシュされた初期実行時の値 を返し続けるわけです。

// fanctional component
...
  const memoDate = useMemo(() => {
    return Date() 
  }, [hoge])


  return (
  　<div>date: {memoDate}</div>
  )

もし上のように第２引数に値を渡している場合は
レンダリング時以外にも、第２引数のhogeが変更された時に再評価され、表示が変わります。

所感

上の例だとあまりパッとしないかもしれませんが、画像処理などの複雑な計算をドラッグイベントの際に行う時など
useMemoを使えば低スペックPCでの動きが変わるのではないでしょうか。

第二引数のdepsの指定漏れでハマることがあるのでお気をつけくださいｍｍ

他のHooksについても追々書いていきます。