コンテンツにスキップ

useCallback()

useCallback – React

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

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

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

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