useCallbackとは
useCallback()はメモ化したコールバック関数を返します。
依存配列(=[deps] コールバック関数が依存している要素が格納されている配列)の要素の何かが変化した場合のみ、メモ化した値を再計算します。
メモ化とは...?
Reactのメモ化とは、計算結果を保持し、それを再利用する手法のことです。キャッシュの考え方と同じイメージで良いかと思います。
そのため、以下の言葉の意味は大体同じになります。
「メモ化された値」=「計算結果が保持された値」
「メモ化する」=「計算結果を再利用できるように保持する」
メモ化によって都度計算する必要がなくなるため、パフォーマンスの向上が期待できる。
基本構文
useCallback(callbackFunction, [deps]);
例えば、name
という変数をconsole.logで出力する関数をメモ化したい場合は以下のようになる。
const callback = useCallback(() => console.log(name), [name]);
依存している要素が更新されれば、関数が再生成される。
依存している要素がなければ、依存配列は空で OK。
const callback = useCallback(() => console.log("何かをする"), []);