【React】useCallbackについて

Posted on by masumasu

こんにちわ、masumasuです。

うだるような暑さが続いていますが、皆様いかがお過ごしでしょうか。私は、この時期からの暑さが非常に苦手です。

今回は、Reactで用いられるuseCallbackについて書いていきます。

usecallback

useCallbackは、関数コンポーネント内で特定の関数をメモ化するためのフックです。

メモ化とは、関数や値を記憶し、依存関係が変更されない限り同じインスタンスを再利用することを意味します。

const memoizedCallback = useCallback(() => {
    // コールバック関数の内容
}, [dependencies]);

memoizedCallbackは、依存配列に指定した値が変更されない限り、同じインスタンスを保持します。

パフォーマンスの最適化

useCallbackは、特に子コンポーネントにコールバック関数を渡す場合に使われます。

コールバック関数が毎回新しいインスタンスとして作成されると、子コンポーネントも毎回再レンダリングされてしまいます。

これを防ぐために、useCallbackを使ってコールバック関数をメモ化します。

例えば、子コンポーネントにメモ化された関数を渡す例を見てみましょう

import React, { useState, useCallback, memo } from 'react';

const ChildComponent = memo(({ onClick }) => {
    console.log('ChildComponent rendered');
    return <button onClick={onClick}>Click me</button>;
});

function ParentComponent() {
    const [count, setCount] = useState(0);

    const handleClick = useCallback(() => {
        setCount(prevCount => prevCount + 1);
    }, []);

    return (
        <div>
            <p>Count: {count}</p>
            <ChildComponent onClick={handleClick} />
        </div>
    );
}

export default ParentComponent;

useCallbackとuseMemoの違い

useCallbackと似たフックにuseMemoがあります。useMemoは値のメモ化に使用され、useCallbackは関数のメモ化に使用されます。

例えば、重い計算処理の結果をメモ化する場合はuseMemoを使われるので、注意が必要です。

まとめ

useCallbackは、Reactの関数コンポーネント内で関数をメモ化するための強力なフックです。

ご覧いただきありがとうございます。