📝

今更ながらuseMemoとuseCallbackについてまとめる

2022/12/31に公開約1,700字

はじめに

ReactのuseMemoとuseCallbackについて不安だったので、
今更ながら自分用にまとめてみたいと思います。

https://ja.reactjs.org/docs/hooks-reference.html

前提: メモ化とは?

メモ化 ≒ キャッシュ。
Reactでは下記の条件の時に再レンダリングされる。

  • stateが変化した時
  • propsが変化した時
  • 親コンポーネントが再レンダリングされた時。

上記の再レンダリングの際に、
改めて計算をする必要がないものは、メモ化をすることで
パフォーマンスの向上につながる。

useMemoとは?

https://ja.reactjs.org/docs/hooks-reference.html#usememo

「値をメモ化」するフックス。
依存配列の要素のいずれかが変化した場合のみ再計算を行う。

  • 構文
useMemo(() => 処理, [依存配列]);
  • 依存配列がある場合
// heightかweightが更新された時に再計算される
const bmi = useMemo(() => calcBMI(height, weight), [height, weight]);
  • 依存配列がない場合
// 初回のみ実行され、2回目以降は実行されない
const bmi = useMemo(() => calcBMI(height, weight), []);

useCallbackとは?

https://ja.reactjs.org/docs/hooks-reference.html#usecallback
「コールバック関数をメモ化」するフックス。
useMemo同様、依存配列の要素のいずれかが変化した場合のみ再計算を行う。

コールバック関数とは
  • 関数の引数に渡す関数
  • 他の関数が実行された時に行う処理を登録するイメージ
    • 非同期処理が完了した時
    • ボタンをクリックした時など
  • 依存配列がある場合
// heightかweightが更新された時に再計算される
const bmi = useCallback(calcBMI(height, weight), [height, weight]);
  • 依存配列がない場合
// 初回のみ実行され、2回目以降は実行されない
const bmi = useCallback(calcBMI(height, weight), []);

下記ブログの「useCallbackの使い所」が非常に分かりやすかったです。
https://tyotto-good.com/blog/usecallback

使い方としては、useEffect内で実行する関数をuseCallbackしておくと、
レンダリングの度に実行しなくて済む。

まとめ

  • メモ化 ≒ キャッシュ
  • useMemo: 値のメモ化
  • useCallback: コールバック関数のメモ化

参考

https://ja.reactjs.org/docs/hooks-reference.html#usememo
https://qiita.com/seira/items/42576765aecc9fa6b2f8
https://tyotto-good.com/blog/usememo
https://tyotto-good.com/blog/usecallback
https://yukimasablog.com/usememo-usecallback-react-memo

Discussion

ログインするとコメントできます