ReactのReact.memo、useCallback、useMemoって結局どこで使う?

プログラミング

Reactのパフォーマンス最適化のために”メモ化”があり、React.memo、useCallback、useMemoを使って実装します。

ブラウザの動きが良くなるので便利なんですが、いざ使おうとなると実際どこで使えばいいの?って頭がこんがらがったので、備忘録のためにも整理してみました。

メモ化の各コードの位置

各コードは、ざっくりと以下の位置で使えます。

export function App() {
    // useMemoは、関数コンポーネント内の関数をメモ化
    const func = useMemo(() => doSomething(arg), [arg]);
    
    // useCallbackは、React.memoでメモ化したコンポーネントに渡すコールバック関数をメモ化
    const handleClick = useCallback(() => { 
        console.log("click"); 
    }, []);

    return (
        <>
            // React.memoは、コンポーネントをメモ化
            <Compoennt onClick={handleClick} /> 
            <... />
        </>
    )
}

// 子コンポーネント(React.memoを使用)
export default React.memo(function Component(handleClick) {
    return(
        <button onClick={handleClick} />    
    )
});

React.memo

一番使うのは、React.memoだと思います。これの使い方はシンプルで、親コンポーネントで使用している子コンポーネントを囲めばOKです。React.memo(関数); のような感じですね。

useCallback

次に、useCallbackですが、これはReact.memoを使用している子コンポーネントにPropsとして渡す関数に対して使います。少しややこしいですが、上記のコードを見てもらえたら分かりやすいかと思います。

一点注意が必要なのが、useCallbackはReact.memoで囲った子コンポーネントに渡す関数に対してしか使えません。ですので、React.memoで囲ってないコンポーネントに対して使っても意味がないです。

忘れてしまいそうですが、「React.memoを使ってからuseCallbackを使う」という風にルールを決めたら取りこぼしは無くなるんじゃないかと思います。

useMemo

useMemoは、子コンポーネントは関係なく、関数コンポーネント内にある関数をメモ化するときに使います。useEffectと似ていますが、useMemoは同じコンポーネント内で呼ばれる関数に対して使用します。

僕はざっくりと上記のように考えていますが、何か間違っていたらご指摘ください!

今回、参考にした記事はこちらです。

メモ化は最初とっつきにくいですが、パフォーマンスを最適化するためには避けて通れないので、何度も説明を見返したり、実装でトライアンドエラーしながら身につけていきたいですね。

コメント

タイトルとURLをコピーしました