useMemo

ユーズメモ

useMemo を分かりやすく

「useMemo」って聞いたことありますか？「そもそもこれいつ使うん？」って思いますよね。それはともかく、useMemoはReactのフックの一つで、特定の値を「メモ化」するために使います。その値が変わらない限り、計算結果がメモリに保存されて、再計算する手間が省かれるというわけなんですよ。

useMemoは高価な計算をメモ化するためによく使われます。つまり、計算に時間がかかるもの、CPUリソースをたくさん使うようなものを一度計算したら、その結果を覚えておく、というわけです。

例えば、大量のデータから何かを検索したり、複雑な数学の計算をしたり、大きな配列やオブジェクトを生成したりするときなどに便利です。これらの操作はパフォーマンスに影響を与える可能性がありますから、結果をメモ化しておけば再レンダリングのときに同じ計算をする必要がなくなるんです。

じゃあ、分かりやすい例え話で説明しましょう。料理を作るのに時間がかかる食材、例えば豚の角煮を考えてみましょう。一度豚の角煮を作ると、次の日もそのまま食べられますよね？毎回豚の角煮を作り直す必要はありません。これがまさにuseMemoの考え方です。一度計算したものは保存しておき、必要なときにそれを取り出す。これにより、毎回同じ計算をする手間が省かれ、アプリケーションのパフォーマンスが向上します。

ただ、useMemoはCPUとメモリのトレードオフになるので、使いどころは慎重に選びましょう。つまり、CPUリソースを節約する代わりに、メモリを少々使うというわけです。めっちゃ便利なんですけど、ほどほどに使わないと逆効果になる可能性もありますからね。

これでuseMemoについてだいぶ理解が深まったんじゃないですか？使うときはちょっと高価な計算が必要なところで使ってみてください。だいぶヤバいやつですよ〜（褒め言葉）。

結論

用語「useMemo」（ユーズメモ）は、React という JavaScript ライブラリを使用して作成された Web アプリケーションにおいて、コンポーネント内で計算結果をキャッシュするための機能です。useMemo を使うことで、コンポーネント内で重い処理を行っている場合に、再レンダリングの回数を減らし、パフォーマンスを向上することができます。

useMemo の使い方

以下は、useMemo を使った例を紹介します。

import React, { useState, useMemo } from 'react'

export default function Example() {
  const [count, setCount] = useState(0)

  const memoizedValue = useMemo(() => {
    const result = count * 2
    return result
  }, [count])

  return (
    <div>
      <p>count: {count}</p>
      <p>memoized value: {memoizedValue}</p>
      <button onClick={() => setCount(count + 1)}>increment</button>
    </div>
  )
}

この例では、useMemoフックを使って、count の値を 2 倍にする処理を実装しています。useMemoは、関数を引数に取り、その関数の戻り値をキャッシュします。第 2 引数には、依存する値の配列を渡します。依存する値が変更された場合に、useMemoの中の関数が再度実行されます。

この例では、count が更新されたときだけ、useMemoの中の関数が再度実行されるようになっています。そのため、memoizedValueの値は、count が更新されるまで変わりません。

実際に動かしてみる

最後に、return 文の中で、count の値と、memoizedValue の値を表示しています。また、ボタンをクリックすることで、count の値をインクリメントすることができます。

このように、useMemo を使うことで、コンポーネント内で重い処理を行っている場合に、再レンダリングの回数を減らし、パフォーマンスを向上することができます。また、依存する値が変更されたときだけ、関数を再度実行することができるため、必要なときにしか処理を実行しないようにできます。

Next.js を学ぶ一覧へ