🔥
UseCallbackとuseMemoの違い
useCallbackとuseMemo
useCalbackとは
useCallbackは、再レンダー間で関数定義をキャッシュできるReactフック。
呼び出しの結果をキャッシュし、キャッシュを利用することで同じ入力が発生した際の再演算を防ぐことができます。
実際の書き方です。
useCallback((fn)=>{},[dependencies])
fnにはキャッシュしたい関数、dependenciesにはfn内のコードで参照されるコンポーネント本体に直接宣言されたすべての変数および関数が含まれます。
useMemoとは
useMemoは、レンダー間で計算結果をキャッシュするためのReactのフック。
コンポーネントのレンダリング結果をキャッシュし、コンポーネント内に渡されたpropsに変更がなければキャッシュしたレンダリング結果を再利用します。
実際の書き方です。
useMemo(()=>{calculateValue},[dependencies])
calculateValueにはキャッシュしたい値を計算する関数。
dependenciesにはcalculateValue内のコードで参照されるコンポーネント本体に直接宣言されたすべての変数および関数が含まれます。
二つの違い
一言で言うとuseMemoはコンポーネントをメモ化するフックスで、useCallbackは関数をメモ化するフックスです。
メモ化≒キャッシュ
わかりやすいなと思った図
まとめ
useMemo:コンポーネントのメモ化
useCalback:関数のメモ化
Discussion