useCallbackは、関数の再生成を防ぐためのReactフックです。Reactコンポーネントは再レンダーのたびに中の関数も新しく作り直されます。
そのため、子コンポーネントに関数をpropsとして渡す場合、関数が毎回新しい参照になってしまい、無駄な再レンダーが発生することがあります。
これを防ぐのがuseCallbackです。
■サンプルコード
const handleClick = useCallback(() => {
console.log("clicked");
},[id]);
上記のようにuseCallbackを使うと、依存配列（第二引数）の値が変わらない限り、同じ関数インスタンスを再利用します。
これにより、React.memoなどと組み合わせて子コンポーネントの再レンダーを最小限にできます。
useCallback の 依存配列に []（空配列） を設定する場合は、「初回レンダー時にだけ関数を生成し、それ以降は同じ関数を再利用する」という意味になります。
よって、関数の参照が毎回変わらない ため、子コンポーネントが不要に再レンダーされません。
ただし、useCallbackは万能ではありません。依存配列の管理を誤ると、古い状態を参照してしまう「ステールクロージャ」問題が起きることがあります。
また、軽いコンポーネントではむしろメモリ負荷が増えるため、パフォーマンスが問題になる箇所だけに使うのがベストです。
👉 まとめると、useCallbackは「関数のメモ化」により無駄な再レンダーを防ぐフックですが、使いどころを見極めることが重要です。
入会申込
ログイン
