コンテンツにスキップ

useCallback()

useCallback – React

React hooksを基礎から理解する (useCallback編+ React.memo) #JavaScript - Qiita

最適化のためのフック。メモ化した関数を返す。コンポーネントの再レンダーによってコンポーネント内の関数が不要に再生成されるのを防ぐことができる。

Reactのリファレンスによると以下の場合のみ使うべきとある。

  • それをmemoでラップされたコンポーネントにpropsとして渡すケース。この場合は、値が変化していない場合には再レンダーをスキップしたいでしょう。メモ化することで、依存値が異なる場合にのみコンポーネントを再レンダーさせることができます。
  • あなたが渡している関数が、後で何らかのフックの依存値として使用されるケース。たとえば、他のuseCallbackでラップされた関数がそれに依存している、またはuseEffectからこの関数に依存しているケースです。