今回は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> </> );}
