【React】useMemoとは？概要とサンプルコードを紹介
Categories:React
投稿者: ぺいじ |
投稿日: 9月 5, 2022

今回はReact hooksのひとつuseMemoについてまとめます。

コンポーネントのメモ化

以前「【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>
    </>
  );
}
JavaScriptReactプログラミングフロントエンド

返信がありません

コメントを残す

メールアドレスが公開されることはありません。