関数をメモ化し、依存配列が変わらない限り同じ関数参照を返す。子コンポーネントへのprops渡しやuseEffectの依存配列に関数を含める際に使う。
const fn = useCallback(callback, dependencies)
const handleClick = useCallback((e: React.MouseEvent) => {
// ...
}, [dep]);import { useState, useCallback, memo } from 'react';
// memo でラップされた子コンポーネント
const Button = memo(({ onClick, label }: {
onClick: () => void;
label: string;
}) => {
console.log(`${label} rendered`);
return <button onClick={onClick}>{label}</button>;
});
function Parent() {
const [count, setCount] = useState(0);
const [other, setOther] = useState(0);
// useCallback なし → other が変わるたびに再生成 → Button が再レンダー
// useCallback あり → count が変わらない限り同じ参照
const increment = useCallback(() => {
setCount(c => c + 1);
}, []); // 依存なし（関数型更新を使うため）
return (
<>
<Button onClick={increment} label="カウント" />
<button onClick={() => setOther(o => o + 1)}>other: {other}</button>
</>
);
}useCallbackは memo() と組み合わせて初めて効果が出る。memo なしの子コンポーネントに渡しても意味がない。