useCallback について【React】

はじめに

実務でuseCallback について学んだので、自分の学習記録用として記事にしました。

開発環境

• React
• Typscript
• PHP

useCallback とは

reactのフックのひとつです。
公式には以下ように書いてあります。

useCallback は、再レンダー間で関数定義をキャッシュできるようにする React フックです。

useCallback を使用することで、関数コンポーネントの中に定義された関数が不必要に再生成されるのを防いでパフォーマンスを最適化することができます。

関数インスタンスをキャッシュ（保存）し、依存関係が変わるまで保存された関数インスタンスを再利用します。
このようにすることで、同じ入力が繰り返し使われるときに再計算を避けることができます。
これをメモ化と言います。

  const handleClick = useCallback(() => {
    console.log('Button clicked');
  }, []);

依存関係

useCallback の第2引数に配列として依存関係を指定することができます。
useCallback は依存配列に指定された値が変更されるまで、関数インスタンスをキャッシュ(保存）します。

下記の例ではproductId もしくはreferrer の値が変更されるまで、handleClick関数は再利用され、不必要に再生成されるのを防ぐことができます。

export default function ProductPage({ productId, referrer, theme }) {
  const handleClick = useCallback((orderDetails) => {
    console.log('Button clicked');
  }, [productId, referrer]);

    // 省略されたコード
}

使用の際の注意点

useCallback はコンポーネントのトップレベルまたは独自のフックでのみ呼び出すことが可能です。
ループや、条件式の中で呼び出すことはできません。
これは、React のフック全般に適用されるルールです。