今回はReact hooksのひとつuseMemoについてまとめます。
Contents
コンポーネントのメモ化
以前「【React】useCallbackのキホン」において、コンポーネントをメモ化するReact.memoを紹介しました。useMemoは、このメモ化された値を返すフックです。useCallbackとの違いは、メモ化される範囲にあります。つまり、useCallbackは関数そのものをメモ化しますが、useMemoは関数の返り値をメモ化するものです。
サンプルコード
実際にuseMemoを使って書いてみます。ここではコンポーネントをメモ化して、不要な再レンダリングをスキップしています。
import React, { useState, useMemo } from "react";
export default function App() {
console.log("render App");
const [count1, setCount1] = useState(0);
const [count2, setCount2] = useState(0);
// 引数を２倍にして返す。
// サンプル用に無駄なループ実行が含まれておりかなりの時間がかかる
const double = (count) => {
let i = 0;
while (i < 10000) i++;
return count * 2;
};
// レンダリング結果のメモ化
const Counter = useMemo(() => {
console.log("render Counter");
const doubledCount = double(count2);
return (
<p>
Counter: {count2}, {doubledCount}
</p>
);
}, [count2]);
return (
<>
<h2>Increment count1</h2>
<p>Counter: {count1}</p>
<button onClick={() => setCount1(count1 + 1)}>Increment count1</button>
<h2>Increment count2</h2>
{Counter}
<button onClick={() => setCount2(count2 + 1)}>Increment count2</button>
</>
);
}
返信がありません