環境
React：v18.3.1
Tips
- 関数の実行結果をキャッシュしておき、
依存値が変化しない限りキャッシュを返す、といった動作を定義するためのフック。 - memo関数やuseCallbackフックは必要性を感じてから動作確認する。
比較
useMemoを使わない場合
TestUseMemo.tsxの内容
function TestUseMemo() {
const funcMemo = (() => {
let temp = 0;
for (let i = 0; i < 4000000000; i++) {
temp += i;
}
return temp;
});
function handleClickBtn() {
console.log('start date = ', Date());
console.log('funcMemo = ', funcMemo());
console.log('end date = ', Date());
}
return (
<>
TestUseMemo.tsx
<br />
<button type="button" onClick={handleClickBtn}>
ボタン
</button>
</>
);
}
export default TestUseMemo;
結果（コンソールの表示内容）
start date = Thu May 16 2024 17:48:07 GMT+0900 (日本標準時)
funcMemo = 7999999996067115000
end date = Thu May 16 2024 17:48:10 GMT+0900 (日本標準時)
start date = Thu May 16 2024 17:48:12 GMT+0900 (日本標準時)
funcMemo = 7999999996067115000
end date = Thu May 16 2024 17:48:16 GMT+0900 (日本標準時)
1回目も2回目も約3〜4秒かかっていることがわかる。
useMemoを使う場合
TestUseMemo.tsxの内容
import { useMemo } from 'react';
function TestUseMemo() {
const funcMemo = useMemo(() => {
let temp = 0;
for (let i = 0; i < 4000000000; i++) {
temp += i;
}
return temp;
}, []);
function handleClickBtn() {
console.log('start date = ', Date());
console.log('funcMemo = ', funcMemo);
console.log('end date = ', Date());
}
return (
<>
TestUseMemo.tsx
<br />
<button type="button" onClick={handleClickBtn}>
ボタン
</button>
</>
);
}
export default TestUseMemo;
結果（コンソールの表示内容）
start date = Thu May 16 2024 17:52:09 GMT+0900 (日本標準時)
funcMemo = 7999999996067115000
end date = Thu May 16 2024 17:52:09 GMT+0900 (日本標準時)
start date = Thu May 16 2024 17:52:16 GMT+0900 (日本標準時)
funcMemo = 7999999996067115000
end date = Thu May 16 2024 17:52:16 GMT+0900 (日本標準時)
レンダリング時に関数の実行結果がキャッシュされているので、即返される。