📝
今更ながらuseMemoとuseCallbackについてまとめる
はじめに
ReactのuseMemoとuseCallbackについて不安だったので、
今更ながら自分用にまとめてみたいと思います。
前提: メモ化とは？
メモ化 ≒ キャッシュ。
Reactでは下記の条件の時に再レンダリングされる。
- stateが変化した時
- propsが変化した時
- 親コンポーネントが再レンダリングされた時。
上記の再レンダリングの際に、
改めて計算をする必要がないものは、メモ化をすることで
パフォーマンスの向上につながる。
useMemoとは？
「値をメモ化」するフックス。
依存配列の要素のいずれかが変化した場合のみ再計算を行う。
- 構文
useMemo(() => 処理, [依存配列]);
- 依存配列がある場合
// heightかweightが更新された時に再計算される
const bmi = useMemo(() => calcBMI(height, weight), [height, weight]);
- 依存配列がない場合
// 初回のみ実行され、2回目以降は実行されない
const bmi = useMemo(() => calcBMI(height, weight), []);
useCallbackとは？
「コールバック関数をメモ化」するフックス。
useMemo同様、依存配列の要素のいずれかが変化した場合のみ再計算を行う。
コールバック関数とは
- 関数の引数に渡す関数
- 他の関数が実行された時に行う処理を登録するイメージ
- 非同期処理が完了した時
- ボタンをクリックした時など
- 依存配列がある場合
// heightかweightが更新された時に再計算される
const bmi = useCallback(calcBMI(height, weight), [height, weight]);
- 依存配列がない場合
// 初回のみ実行され、2回目以降は実行されない
const bmi = useCallback(calcBMI(height, weight), []);
下記ブログの「useCallbackの使い所」が非常に分かりやすかったです。
使い方としては、useEffect内で実行する関数をuseCallbackしておくと、
レンダリングの度に実行しなくて済む。
まとめ
-
メモ化≒ キャッシュ -
useMemo: 値のメモ化 -
useCallback: コールバック関数のメモ化
参考
Discussion