【React】useCallbackの使い方

使い方

useCallback は関数の定義と一緒に使用します。

const memoizedFunction = useCallback(
  () => {
    // 関数の本体
  },
  [/* 依存配列 */]
);

useCallback は2つの引数を取ります:

• 第1引数: メモ化（記憶）したい関数
• 第2引数: 依存配列（この配列の値が変わったときだけ、関数が再作成されます）

• 「memo化」されたコンポーネントはpropsに変更がない限りレンダリングされない
• 「memo化」していてもpropsにアロー関数をわたしている場合、アロー関数は毎回再生成されるので毎回再レンダリングされてしまう
• 「useCallback」で関数のmemo化すると再レンダリングを防ぐことができます