ReactのReact.memo、useCallback、useMemoについてまとめてみた

ReactのhooksのReact.memo、useCallback、useMemoの3つに
触れる機会があったのでまとめてみました。

• useCallback(関数をメモ化する)(メモ化→キャッシュに保存する)

const handleClick = useCallback(() => {
+    setCountHeavy(countHeavy + 1);
+  }, [countHeavy]);

countHeavyが変更されない限りhandleClick 関数は実行されない

• useMemo(値をメモ化する)

countHeavyが変更されない限りwhile文は実行されない

const handleClick = usememo(() => {
+    while(i < 1000000) {
        i++;
     }
+  }, [countHeavy]);

countHeavyが変更されない限りhandleClick 関数は実行されない

• React.memo(コンポーネントをメモ化する、propsが変更されたら実行)

import React, { useState } from "react";

const Child = React.memo(props => {
console.log("render Child");
return <p>Child: {props.count}</p>;
});

3つともキャッシュする内容が違うだけで概念は同じ。
・useCallback=関数をメモ化する
・useMemo=値をメモ化する
・React.memo=コンポーネントをメモ化する