useCallback の使い方

3日 ago

user

1 minute

useCallback は、関数の再生成を防ぐためのReact Hooks です。
コンポーネントの再レンダリング時に同じ関数を再利用できるようにすることで、パフォーマンスの最適化や意図しない再レンダリングの抑制に役立ちます。

✅ useCallback の基本構文

const memoizedCallback = useCallback(() => {
  // 処理内容
}, [依存値1, 依存値2])

第1引数：キャッシュしたい関数
第2引数：依存配列。これが変化しない限り、関数は再生成されない

🎯 使い所：いつ使うの？

ケース	useCallbackを使うべきか？
子コンポーネントに関数をpropsで渡す	✅ YES
高頻度で再レンダリングされるコンポーネント内の関数	✅ YES
単にイベントハンドラを定義しているだけ	❌ NO（必要なし）

🧩 使用例

例：React.memoと組み合わせる

// 子コンポーネント
const Button = React.memo(({ onClick }: { onClick: () => void }) => {
  console.log('Buttonレンダリング')
  return <button onClick={onClick}>Click me</button>
})

// 親コンポーネント
const Parent = () => {
  const [count, setCount] = useState(0)

  const handleClick = useCallback(() => {
    console.log('clicked')
  }, [])

  return (

<div>

<p>Count: {count}</p>
      <button onClick={() => setCount((c) => c + 1)}>+1</button>
      <Button onClick={handleClick} />
    </div>
  )
}

📌 useCallback を使わないと handleClick は毎回新しく生成され、
結果的に React.memo でラップされた Button コンポーネントも無駄に再レンダリングされます。

🔗 参考リンク

React公式：useCallback