LoginSignup
0
0

More than 1 year has passed since last update.

【React】useCallbackとは

Last updated at Posted at 2022-12-26

useCallbackとは

useCallback()はメモ化したコールバック関数を返します。
依存配列(=[deps] コールバック関数が依存している要素が格納されている配列)の要素の何かが変化した場合のみ、メモ化した値を再計算します。

メモ化とは...?

Reactのメモ化とは、計算結果を保持し、それを再利用する手法のことです。キャッシュの考え方と同じイメージで良いかと思います。
そのため、以下の言葉の意味は大体同じになります。

「メモ化された値」=「計算結果が保持された値」
「メモ化する」=「計算結果を再利用できるように保持する」

メモ化によって都度計算する必要がなくなるため、パフォーマンスの向上が期待できる。

基本構文

useCallback(callbackFunction, [deps]);

例えば、nameという変数をconsole.logで出力する関数をメモ化したい場合は以下のようになる。

const callback = useCallback(() => console.log(name), [name]);

依存している要素が更新されれば、関数が再生成される。
依存している要素がなければ、依存配列は空で OK。

const callback = useCallback(() => console.log("何かをする"), []);
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0