ReactのuseMemoを理解する

ReactのStame Managementのシリーズでは、useStateを使った簡単な状態管理、useReducerを使った複雑な状態管理の仕方を学びました。

今日はその続きとして、React HookのuseMemoの使い方を紹介します。

これはVueのフレームワークを使ったことがある方ならweatch()メソッドと同じになると理解してもらってOKです。

では、前回行ったreuceメソッドを利用した例を見ていきます。

まずは、こちらのコードを見てください。

import { useState } from "react";

export default function App() {
  const [numbers] = useState([10, 20, 30]);

  const total = numbers.reduce((acc, num) => acc + num, 0);

  return <div>{total}</div>;
}

ここでnumbers配列の数字の合計値をブラウザに表示しているようにしています。ここで感がれられる問題があります。もし、数字の入っている配列が膨大な数である場合、コンポーネントがレンダーされるたびにreduceの関数が実行されてコンポーネントのレンダーに時間がかかることが想定されます。

そこでuseMemoを使って、dependency（依存するデータ）を教えてあげることができます。

const cachedValue = useMemo(calculateValue, dependencies)

この場合でいうと、numbersの配列が変わらない限り答えは同じになるのでそれを教えてあげるわけです。

import { useState, useMemo } from "react";

export default function App() {
  const [numbers] = useState([10, 20, 30]);

  const total = useMemo(
    () => numbers.reduce((acc, num) => acc + num, 0),
    [numbers]
  );

  return <div>{total}</div>;
}

useMemoはそこまで難しいコンセプトではないので今日はこれくらいで。