Help us understand the problem. What is going on with this article?

useMemoについて

UseMemoについての覚書です。

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

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

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

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

useMemoの動き

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

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

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

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

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


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

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

所感

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

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

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

EndouT6
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした