目次
開発環境
- Visual Studio Code:version 1.73.0
- OS:Windows10
- react:18.2.0
- react-dom:18.2.0
ReactのuseMemoとは
useMemoは、値のメモ化を行うためのReact Hookです。
メモ化のプロセスで関数の計算結果をメモリ内のキャッシュに保存することで、同じ入力に対する再計算を避け、パフォーマンスを向上させることができる技術です。
特に計算コストが高い処理や、頻繁に呼び出される関数に対して有効です。
公式ドキュメント：https://ja.react.dev/reference/react/useMemo
useMemoの基本構文
useMemoの基本構文は以下の通りです。
1 2 3 | const memoizedValue = useMemo(() => { return computedValue; }, [dependency1, dependency2, ...]); |
useMemoは、特定の計算結果をメモ化（キャッシュ）するために使います。
依存配列（[dependency1, dependency2, ...]）に含まれる値が変わった時にのみ、計算が再実行されます。
依存配列が空の場合（[]）、初回レンダリング時に一度だけ実行され、それ以降は再実行されません。
useMemoの使い方
useMemoの具体的な使い方を説明していきます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | import './App.css'; import React, { useState, useMemo } from 'react'; function App() { // 状態管理の変数を定義 const [count01, setCount01] = useState(0); const [count02, setCount02] = useState(0); // 重い計算を模擬する関数 const calculation = (num) => { for (let i = 0; i < 1000000000; i++) {} return num * 2; }; // useMemoを使用して、計算結果をメモ化する const memoizedValue = useMemo(() => { return calculation(count02); }, [count02]); return ( <div> <h1>React Hooks Tutorial</h1> <hr /> <h2>useMemo</h2> {/* Count01の値の表示 */} <p>Count01: {count01}</p> {/* カウンターの値を増やすボタン */} <button onClick={() => setCount01(count01 + 1)}>Increment Count01</button> {/* Count02の値の表示 */} <p>Count02: {count02}</p> {/* カウンターの値を増やすボタン */} <button onClick={() => setCount02(count02 + 1)}>Increment Count02</button> {/* メモ化された値の表示 */} <p>Memoized Value: {memoizedValue}</p> </div> ); } export default App; |
インポート文
1 | import React, { useState, useMemo } from 'react'; |
Reactとフック（useState、useMemo）をインポートしています。
状態管理の変数を定義
1 2 | const [count01, setCount01] = useState(0); const [count02, setCount02] = useState(0); |
useStateフックを使用して、カウンターの値をcount01とcount02という状態変数を作成して管理します。
重い計算を模擬する関数
1 2 3 4 | const calculation = (num) => { for (let i = 0; i < 1000000000; i++) {} return num * 2; }; |
calculation関数は、引数として受け取った数値を2倍にしますが、ループ文を使って重い計算を模擬しています。
useMemoを使用して計算結果をメモ化
1 2 3 | const memoizedValue = useMemo(() => { return calculation(count02); }, [count02]); |
useMemoフックを使用して、calculation関数の結果をメモ化します。
依存配列にcount02を指定することで、count02が変更されたときにのみcalculation関数が再実行され、それ以外のときは、前回の計算結果が再利用されます。
return文でのUI構築
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | return ( <div> <h1>React Hooks Tutorial</h1> <hr /> <h2>useMemo</h2> {/* Count01の値の表示 */} <p>Count01: {count01}</p> {/* カウンターの値を増やすボタン */} <button onClick={() => setCount01(count01 + 1)}>Increment Count01</button> {/* Count02の値の表示 */} <p>Count02: {count02}</p> {/* カウンターの値を増やすボタン */} <button onClick={() => setCount02(count02 + 1)}>Increment Count02</button> {/* メモ化された値の表示 */} <p>Memoized Value: {memoizedValue}</p> </div> ); |
各カウンターの値を増やすボタンを用意し、ボタンをクリックするとそれぞれの状態変数が更新されます。
count02の値に基づく計算結果をメモ化して表示します。
おわりに
ReactのuseMemoの使い方について説明してきましたが、いかがだったでしょうか。
useMemoを使用することで、初回の処理結果をキャッシュに保持し、必要な場合にのみ再計算することでパフォーマンスの向上が期待できます。
ぜひ、ReactフックのuseMemoを使いこなして、効率的なReactアプリケーションを作成しましょう。