【React】useCallbackの使い方

作成日: 2025年10月08日更新日: 2025年10月08日

開発環境

Visual Studio Code:version 1.73.0
OS:Windows10
react:18.2.0
react-dom:18.2.0

ReactのuseCallbackとは

useCallbackは、再レンダー間で関数定義をキャッシュできるようにするためのReact Hookです。関数をキャッシュに保持することにより、関数の依存関係が変わらない限り、関数を再利用することで関数が不要に再作成されるのを防ぐことができます。そのため、子コンポーネントに渡すコールバック関数が常に同じ参照を持つため、子コンポーネントの不要な再レンダリングを防ぎ、パフォーマンスを最適化することができます。公式ドキュメント：https://ja.react.dev/reference/react/useCallback

useCallbackの基本構文

useCallbackの基本構文は以下の通りです。


1const memoizedCallback = useCallback(() => {
2  // 実行される処理
3}, [dependencies]);

useCallbackの使い方


1// App.js
2import './App.css';
3import React, { useState, useCallback } from 'react';
4import Child from './Child';
5
6function App() {
7  const [count, setCount] = useState(0);
8  const [countWithCallback, setCountWithCallback] = useState(0);
9
10  // useCallbackを使用しない関数
11  const increment = () => {
12    setCount(prevCount => prevCount + 1);
13  };
14
15  // useCallbackを使用する関数
16  const incrementWithCallback = useCallback(() => {
17    setCountWithCallback(prevCount => prevCount + 1);
18  }, []);
19
20
21  return (
22    <div>
23      <h1>React Hooks Tutorial</h1>
24      <hr />
25      <h2>useCallback</h2>
26      <p>Count: {count}</p>
27      <button onClick={increment}>Increment Count</button>
28      <Child onClick={increment} label="Increment without useCallback" />
29
30      <p>Count with useCallback: {countWithCallback}</p>
31      <button onClick={incrementWithCallback}>Increment Count with useCallback</button>
32      <Child onClick={incrementWithCallback} label="Increment with useCallback" />
33    </div>
34  );
35}
36
37export default App;


1// Child.js
2import React from 'react';
3
4function Child({ onClick, label }) {
5  console.log(`${label} rendered`);
6
7  return (
8    <div>
9      <button onClick={onClick}>{label}</button>
10    </div>
11  );
12}
13
14export default React.memo(Child);

Increment without useCallbackボタンをクリックをするとChildコンポーネントが再レンダリングされます。毎回新しい関数が生成されるため、React.memoによる最適化が無効になり、コンソールにIncrement without useCallback renderedが表示されます。 Increment with useCallbackボタンをクリックするとChildコンポーネントは再レンダリングされません。 useCallbackによりメモ化された関数が使用されるため、関数の参照が変わらず、React.memoによる最適化が有効になり、コンソールにIncrement with useCallback renderedが表示されません。これにより、useCallbackとReact.memoを組み合わせることで、不要な再レンダリングを防ぎ、パフォーマンスの最適化ができることを示しています。

useStateフックの使用


1// useStateフックの使用
2const [count, setCount] = useState(0);
3const [countWithCallback, setCountWithCallback] = useState(0);

countとcountWithCallbackという2つの状態変数を定義しています。それぞれの状態を更新するためにsetCountとsetCountWithCallbackの関数が使われます。

increment関数


1// increment関数
2const increment = () => {
3  setCount(prevCount => prevCount + 1);
4};

useCallbackを使用しない通常の関数です。 setCountを使ってcountの値を1増やす処理ですが、 prevCount => prevCount + 1という形で、現在の状態に依存して新しい状態を設定します。

incrementWithCallback関数


1// incrementWithCallback関数
2const incrementWithCallback = useCallback(() => {
3  setCountWithCallback(prevCount => prevCount + 1);
4}, []);

useCallbackを使用して定義された関数です。 setCountWithCallbackを使ってcountWithCallbackの値を1増やします。依存配列が空のため、この関数はコンポーネントの初回レンダリング時にのみ作成され、その後は再レンダリングされても同じ関数が使用されます。

Childコンポーネントの使用


1// Childコンポーネントの使用
2<Child onClick={increment} label="Increment without useCallback" />
3<Child onClick={incrementWithCallback} label="Increment with useCallback" />

ChildコンポーネントにonClickとlabelのpropsを渡しています。 onClickにはそれぞれincrementとincrementWithCallbackの関数を渡しています。

React.memoの使用


1// React.memoの使用
2const Child = React.memo(({ onClick, label }) => {
3  console.log(`${label} rendered`);
4
5  return (
6    <div>
7      <button onClick={onClick}>{label}</button>
8    </div>
9  );
10});

React.memoは高階コンポーネントで、Childコンポーネントが受け取るpropsが変更されない限り再レンダリングされないようにします。これにより、不要な再レンダリングを防ぎ、パフォーマンスを向上させます。また、ChildコンポーネントはonClickとlabelという2つのpropsを受け取り、ボタンがクリックされるとonClick関数が実行されます。

おわりに

ReactのuseCallbackの使い方について説明してきましたが、いかがだったでしょうか。 useCallbackを使用することで、初回のレンダリング時に関数をキャッシュに保持し、不要なレンダリングを防ぐことでパフォーマンスの向上が期待できます。特に、大規模なアプリケーションや再レンダリングコストが高いコンポーネントで効果を発揮します。例えば、データの変更が頻繁に起こるダッシュボードやリアルタイム更新が必要なチャットアプリなどで、useCallbackを適切に使用することで、パフォーマンスが大幅に向上する可能性があります。ぜひ、ReactフックのuseCallbackを使いこなして、効率的なReactアプリケーションを作成しましょう。