Wiki: ページの作成:「== 概要 == `useMemo` は、Reactの関数コンポーネントで計算結果をメモ化 (キャッシュ) するためのHookである。

コンポーネントが再レンダリングされるたびに重い計算が実行されると、パフォーマンスが低下する場合がある。
`useMemo` を使用すると、依存配列の値が変化しない限り前回の計算結果を再利用できるため、不要な再計…」

2026-03-07T18:18:31Z

ページの作成:「== 概要 == <code>useMemo</code> は、Reactの関数コンポーネントで計算結果をメモ化 (キャッシュ) するためのHookである。 コンポーネントが再レンダリングされるたびに重い計算が実行されると、パフォーマンスが低下する場合がある。 <code>useMemo</code> を使用すると、依存配列の値が変化しない限り前回の計算結果を再利用できるため、不要な再計…」

新規ページ

== 概要 ==
<code>useMemo</code> は、Reactの関数コンポーネントで計算結果をメモ化 (キャッシュ) するためのHookである。 
 
コンポーネントが再レンダリングされるたびに重い計算が実行されると、パフォーマンスが低下する場合がある。 
<code>useMemo</code> を使用すると、依存配列の値が変化しない限り前回の計算結果を再利用できるため、不要な再計算を防止できる。 
 
基本構文は <code>useMemo(calculateValue, dependencies)</code> であり、第1引数に値を計算する関数、第2引数に依存配列を指定する。 
依存配列の各要素は <code>Object.is()</code> で比較され、値が変化した場合のみ計算関数が再実行される。 
 
<code>useMemo</code> が特に有効な場面は以下に示す3つである。 
 
* 計算処理が明らかに重い場合 (数百〜数千要素の配列処理等)
* メモ化した値を <code>React.memo</code> でラップされた子コンポーネントにpropとして渡す場合
* メモ化した値が他のHook (<code>useEffect</code> 等) の依存配列に含まれる場合
 
React Compiler (2025年10月 v1.0リリース) は、コンポーネント内の計算を自動的にメモ化する最適化を行う。 
 
React Compilerを導入している場合、多くの場面で手動の <code>useMemo</code> は不要になる。 
ただし、サードパーティライブラリが参照の等価性を要求する場面等、細かい制御が必要なケースでは引き続き手動での <code>useMemo</code> が有効である。 
 
なお、<code>useMemo</code> はパフォーマンス最適化のためのHookであり、計算結果の正確性を保証するものではない。 
Reactは内部的にキャッシュを破棄する場合があるため、メモ化の保証を前提としたロジックは定義しないことを推奨する。 
 

== 基本構文 ==
<code>useMemo</code> のTypeScriptでのシグネチャを以下に示す。 
 
<syntaxhighlight lang="typescript">
// 基本的な使用方法
const memoizedValue = useMemo(calculateValue, dependencies);

// ジェネリック型を明示する場合
const memoizedValue = useMemo<型>(() => calculateValue(), dependencies);
</syntaxhighlight>
 
下表に、パラメータの説明を示す。 
 
<center>
{| class="wikitable"
|+ パラメータの説明
! パラメータ !! 説明
|-
| calculateValue || キャッシュする値を計算する関数 引数を受け取らず、任意の型の値を返す。 純粋関数である必要があり、副作用を含めてはならない。 初回レンダリング時に実行され、依存配列の値が変化した時のみ再実行される。
|-
| dependencies || 第1引数が参照する全てのリアクティブ値を含む配列 props、state、コンポーネント本体で宣言された変数・関数が対象である。 各要素は <code>Object.is()</code> で前回の値と比較される。
|}
</center>
 
戻り値の型は、TypeScriptの型推論が自動的に適用される。 
明示的にジェネリック型を指定する場合は <code>useMemo<string>(...)</code> のように記述する。 
 
<center>
{| class="wikitable"
|+ useMemoのパラメータ一覧
! パラメータ !! 型 !! 説明
|-
| calculateValue || <code>() => T</code> || キャッシュする値を計算する純粋関数
|-
| dependencies || <code>React.DependencyList</code> || calculateValueが参照するリアクティブ値の配列
|-
| 戻り値 || <code>T</code> || 計算された値、または前回のキャッシュ値
|}
</center>
 

== 使用例 ==
==== 基本的な使用例 ====
数値のリストから合計・最大値・最小値を計算する重い処理をメモ化する例を以下に示す。 
 
以下の例では、<code>multiplier</code> の状態が変化しても、<code>numbers</code> が変化しない限り統計値の計算は実行されない。 
 
<syntaxhighlight lang="typescript">
// Reactのhooksをインポート (useMemo: メモ化, useState: 状態管理)
import { useMemo, useState } from 'react';

// 統計データを表現するインターフェース (戻り値の型定義)
interface Statistics {
sum: number; // 合計値
max: number; // 最大値
min: number; // 最小値
average: number; // 平均値
}

// コンポーネントのprops型定義
interface StatsDashboardProps {
numbers: number[]; // 計算対象の数値配列
}

// 統計ダッシュボードコンポーネント
function StatsDashboard({ numbers }: StatsDashboardProps) {
// 乗算用の状態 (ボタンを押下すると変化する)
const [multiplier, setMultiplier] = useState(1);

// numbersが変化した場合のみ再計算される (メモ化された統計値)
const stats = useMemo<Statistics>(() => {
console.log('統計値を計算中...');

const sum = numbers.reduce((acc, n) => acc + n, 0); // 合計値を計算
const max = Math.max(...numbers); // 最大値を計算
const min = Math.min(...numbers); // 最小値を計算
const average = numbers.length > 0 ? sum / numbers.length : 0; // 平均値を計算 (0除算を防ぐためチェック付き)

// 計算結果をオブジェクトで返す
return { sum, max, min, average };
// 依存配列: numbersが変化した時のみ再計算
}, [numbers]);

// 画面描画 (JSXを返す)
return (
<div>
{/* 合計値に倍率を掛けて表示 */}
合計: {stats.sum * multiplier}
最大値: {stats.max}
最小値: {stats.min}
平均値: {stats.average.toFixed(2)}
{/* ボタンを押下するとmultiplierが増加 (統計値の再計算は発生しない) */}
<button onClick={() => setMultiplier(m => m + 1)}>
倍率を上げる (現在: {multiplier})
</button>
</div>
);
}
</syntaxhighlight>
 
==== オブジェクト参照の安定化 ====
オブジェクトや配列はレンダリングのたびに新しい参照が生成される。 
<code>useMemo</code> でオブジェクトの参照を安定化させ、子コンポーネントへの不要な再レンダリングを防止することができる。 
 
以下の例では、userConfig オブジェクトは theme が変化した時のみ新しい参照が生成されるため、ConfigDisplay の不要な再レンダリングを防止している。 
 
<syntaxhighlight lang="typescript">
// Reactのhooksとmemoをインポート
// useMemo : メモ化
// useState : 状態管理
// memo : コンポーネントのメモ化
import { useMemo, useState, memo } from 'react';

// ユーザ設定を保持するオブジェクトの型定義
interface UserConfig {
theme: string; // テーマ (light / dark等)
language: string; // 言語 (ja / en等)
fontSize: number; // フォントサイズ (px単位)
}

// ConfigDisplayコンポーネントのprops型定義
interface ConfigDisplayProps {
config: UserConfig; // ユーザ設定オブジェクト
}

// React.memoでラップされた子コンポーネント
// propsが変化しない限り再レンダリングされない
const ConfigDisplay = memo(({ config }: ConfigDisplayProps) => {
console.log('ConfigDisplayがレンダリングされた');
return (
<div>
テーマ: {config.theme}
言語: {config.language}
フォントサイズ: {config.fontSize}px
</div>
);
});

// ユーザ設定コンポーネント (親)
function UserSettings() {
const [theme, setTheme] = useState('light'); // テーマの状態管理
const [counter, setCounter] = useState(0); // カウンタの状態管理 (テーマとは無関係)

// useMemoなしの場合、counterが変化するたびに新しいオブジェクトが生成される
// ConfigDisplayはmemoでラップされていても毎回再レンダリングされてしまう

// useMemoありの場合、themeが変化した時のみ新しいオブジェクトが生成される
// 依存配列に[theme]を指定することにより、themeの変化のみをトリガーとする
const userConfig = useMemo<UserConfig>(() => ({
theme,
language: 'ja',
fontSize: 16,
}), [theme]);

// 画面描画
return (
<div>
{/* テーマを切り替えるボタン (押すとuserConfigが再生成される) */}
<button onClick={() => setTheme(t => t === 'light' ? 'dark' : 'light')}>
テーマを切り替える
</button>
{/* カウンタ増加ボタン (userConfigは再生成されない) */}
<button onClick={() => setCounter(c => c + 1)}>
カウンタ: {counter}
</button>
{/* 安定した参照を持つuserConfigを渡す */}
<ConfigDisplay config={userConfig} />
</div>
);
}
</syntaxhighlight>
 
==== フィルタリングとソート ====
リストのフィルタリングやソート処理は、データが多い場合に計算コストが高くなる。 
例えば、リアルタイム検索では入力のたびに再レンダリングが発生するため、フィルタリング処理のメモ化が特に効果的である。 
 
以下の例では、検索クエリやソート条件が変化した時のみ再計算するようにメモ化している。 
 
<syntaxhighlight lang="typescript">
// Reactのhooksをインポート
// useMemo: メモ化, useState: 状態管理
import { useMemo, useState } from 'react';

// 商品データのインターフェース定義
interface Product {
id: number; // 商品ID
name: string; // 商品名
price: number; // 価格
category: string; // カテゴリ
}

// ソートキーの型定義
// name: 名前順, price: 価格順
type SortKey = 'name' | 'price';

// ProductListコンポーネントのprops型定義
interface ProductListProps {
products: Product[]; // 商品データの配列
}

// 商品リストコンポーネント
function ProductList({ products }: ProductListProps) {
const [query, setQuery] = useState(''); // 検索クエリの状態
const [sortKey, setSortKey] = useState<SortKey>('name'); // ソートキーの状態
const [selectedCategory, setSelectedCategory] = useState(''); // 選択カテゴリの状態

// フィルタリングとソートをメモ化する
// 依存配列のいずれかが変化した場合のみ再計算される
const filteredAndSorted = useMemo<Product[]>(() => {
// 元の配列をコピー (破壊的な操作を防ぐため)
let result = [...products];

// カテゴリでフィルタリング (カテゴリが選択されている場合)
if (selectedCategory) {
result = result.filter(p => p.category === selectedCategory);
}

// 検索クエリでフィルタリング (クエリが入力されている場合)
if (query) {
const lowerQuery = query.toLowerCase();

// 商品名がクエリを含むかをチェック (大文字小文字を無視)
result = result.filter(p => p.name.toLowerCase().includes(lowerQuery));
}

// ソート処理 (sortKeyに基づいてソート順を決定)
result.sort((a, b) => {
// 名前順ソートの場合
if (sortKey === 'name') return a.name.localeCompare(b.name);

// 価格順ソートの場合
return a.price - b.price;
});

// フィルタリングして、ソート済みの結果を返す
return result;
// 依存配列: これらの値が変化した場合のみ再計算
}, [products, query, sortKey, selectedCategory]);

// 画面描画
return (
<div>
{/* 検索入力フィールド */}
<input
value={query}
onChange={e => setQuery(e.target.value)}
placeholder="商品名で検索"
/>
{/* ソート順選択ドロップダウン */}
<select value={sortKey} onChange={e => setSortKey(e.target.value as SortKey)}>
<option value="name">名前順</option>
<option value="price">価格順</option>
</select>
{/* 検索結果件数の表示 */}
{filteredAndSorted.length}件の商品
{/* 商品リストの表示 */}
<ul>
{filteredAndSorted.map(p => (
// 各商品をリストアイテムとして表示 (keyにidを使用)
<li key={p.id}>{p.name} - {p.price}円</li>
))}
</ul>
</div>
);
}
</syntaxhighlight>
 
==== JSX要素のメモ化 ====
<code>useMemo</code> でJSX要素をメモ化するパターンを以下に示す。 
 
JSX要素のメモ化は行数が多いテーブルや複雑なリストで有効である。 
ただし、React Compilerが導入されている場合は自動的に最適化されるため、手動でのメモ化は不要になる場合が多い。 
 
以下の例では、生成コストが高いリストや複雑なUIを依存値が変化した時のみ再生成指定る。 
 
<syntaxhighlight lang="typescript">
// Reactのhooksをインポート
// useMemo: メモ化, useState: 状態管理
import { useMemo, useState } from 'react';

// データ行のインターフェース定義
interface DataRow {
id: number; // 行ID
label: string; // ラベル
value: number; // 値
isHighlighted: boolean; // ハイライト表示フラグ
}

// DataTableコンポーネントのprops型定義
interface DataTableProps {
rows: DataRow[]; // データ行の配列
}

// データテーブルコンポーネント
function DataTable({ rows }: DataTableProps) {
const [filterHighlighted, setFilterHighlighted] = useState(false); // ハイライト行のみ表示するかどうかのフィルタフラグ

// JSX要素をメモ化する
// rowsまたはfilterHighlightedが変化した場合のみ再計算される
const tableRows = useMemo(() => {
// フィルタリング条件に応じて表示する行を決定
const displayRows = filterHighlighted
? rows.filter(r => r.isHighlighted) // ハイライト行のみ抽出
: rows; // 全行を表示

// 各行をJSX要素に変換
return displayRows.map(row => (
<tr
key={row.id}
// ハイライト行は背景色を変更 (薄い黄色)
style={{ background: row.isHighlighted ? '#fffbe6' : 'transparent' }}
>
<td>{row.id}</td>
<td>{row.label}</td>
{/* 値をロケールに応じた形式で表示 (3桁区切り等) */}
<td>{row.value.toLocaleString()}</td>
</tr>
));
// 依存配列: これらの値が変化した場合のみ再計算
}, [rows, filterHighlighted]);

// 画面描画
return (
<div>
{/* フィルタリングオプション */}
<label>
<input
type="checkbox"
checked={filterHighlighted}
onChange={e => setFilterHighlighted(e.target.checked)}
/>
ハイライト行のみ表示
</label>
{/* データテーブル */}
<table>
{/* テーブルヘッダー */}
<thead>
<tr>
<th>ID</th>
<th>ラベル</th>
<th>値</th>
</tr>
</thead>
{/* テーブルボディ (メモ化されたJSX要素を使用) */}
<tbody>{tableRows}</tbody>
</table>
</div>
);
}
</syntaxhighlight>
 

== React Compilerとの関係 ==
==== React Compilerによる自動メモ化 ====
React Compiler (正式名: React Forget) は2025年10月にv1.0がリリースされた、Reactの公式コンパイラである。 
React Compilerは、コンポーネントのコードを静的解析して、<code>useMemo</code>、<code>useCallback</code>、<code>React.memo</code> に相当する最適化を自動的に適用する。 
 
下表に、React Compilerを導入した場合の報告されているパフォーマンス改善を示す。 
 
<center>
{| class="wikitable"
|+ React Compiler導入によるパフォーマンス改善
! 項目 !! 改善内容
|-
| 読み込み速度 || 最大12[%]向上
|-
| 相互作用速度 || 最大2.5倍向上
|-
| Sanity Studio || 全体で20〜30[%]のレンダリング時間削減
|}
</center>
 
React Compilerを有効化する方法を以下に示す。 
 
# babel-plugin-react-compilerをインストールする
npm install babel-plugin-react-compiler
 
<syntaxhighlight lang="typescript">
// babel.config.js または vite.config.ts での設定例
// 下記は、vite.config.tsの場合
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
plugins: [
react({
babel: {
plugins: [['babel-plugin-react-compiler']],
},
}),
],
});
</syntaxhighlight>
 
React Compilerが有効な場合、以下に示すような手動メモ化コードは自動的に同等の最適化が適用されるため、明示的な記述が不要になる。 
 
<syntaxhighlight lang="typescript">
// React Compiler導入前 : 手動でuseMemoを記述していた
const expensiveResult = useMemo(() => computeExpensive(data), [data]);

// React Compiler導入後 : コンパイラが自動的に最適化するため、useMemo無しで記述できる
const expensiveResult = computeExpensive(data);
</syntaxhighlight>
 
新規に作成するコンポーネントでは、React Compilerに最適化を任せて <code>useMemo</code> を省略することを推奨する。 
 
==== 手動メモ化が必要なケース ====
React Compiler導入後も、以下のケースでは手動での <code>useMemo</code> が引き続き有効である。 
 
<center>
{| class="wikitable"
|+ 手動メモ化が必要なケース
! ケース !! 説明
|-
| サードパーティライブラリが参照の等価性を要求する場合 || 一部のライブラリ (例: React SelectのisOptionDisabled等) は、 渡されるオブジェクト・配列の参照が変化した場合に処理を再実行する。 React Compilerの自動最適化では対応できない場合があり、 手動での <code>useMemo</code> が必要になる。
|-
| React Compilerが解析できない複雑なパターン || 外部ストア (Redux, Zustand等) との連携や、動的なHookの呼び出しパターン等が該当する。
|-
| 既存コードの段階的な移行期間 || React Compilerを段階的に導入している場合、 Compiler未対応のコンポーネントでは従来通り手動メモ化が必要である。
|}
</center>
 

== useCallbackとの違い ==
<code>useMemo</code> と <code>useCallback</code> は、どちらもメモ化を行うHookであるが、メモ化する対象が異なる。 
 
<center>
{| class="wikitable"
|+ useMemoとuseCallbackの比較
! 項目 !! useMemo !! useCallback
|-
| メモ化する対象 || 計算の結果 (値) || 関数の定義そのもの
|-
| 戻り値 || 計算された値 || メモ化された関数
|-
| 主な用途 || 重い計算結果のキャッシュ || コールバック関数の参照安定化
|}
</center>
 
<code>useCallback(fn, deps)</code> は、概念的に <code>useMemo(() => fn, deps)</code> と同等である。 
以下のコードはいずれも同じ動作をする。 
 
<syntaxhighlight lang="typescript">
import { useMemo, useCallback } from 'react';

// useCallbackを使用する場合
const handleClick = useCallback((id: number) => {
console.log('クリックされた:', id);
}, []);

// useMemoで同等の動作を実現する場合
const handleClickWithMemo = useMemo(() => (id: number) => {
console.log('クリックされた:', id);
}, []);
</syntaxhighlight>
 
関数をメモ化する場合は <code>useCallback</code> を使用した方が意図が明確になるため、関数のメモ化には <code>useCallback</code> を優先することを推奨する。 
<code>useMemo</code> は計算結果の値をメモ化する場合に使用する。 
 
<syntaxhighlight lang="typescript">
// Reactのhooksとmemoをインポート
// useMemo: 値のメモ化, useCallback: 関数のメモ化, useState: 状態管理, memo: コンポーネントのメモ化
import { useMemo, useCallback, useState, memo } from 'react';

// 商品アイテムのインターフェース定義
interface Item {
id: number; // アイテムID
name: string; // アイテム名
price: number; // 価格 (税抜)
}

// ItemListコンポーネントのprops型定義
interface ItemListProps {
items: Item[]; // アイテム配列
taxRate: number; // 税率 (例: 0.1 = 10%)
}

// React.memoでラップされたアイテムリストコンポーネント
// propsが変化しない限り再レンダリングされない
const ItemList = memo(({ items, taxRate }: ItemListProps) => {
// 税込み価格を計算する (値をメモ化 : useMemoが適切)
// itemsまたはtaxRateが変化した場合のみ再計算される
const itemsWithTax = useMemo(() =>
// 各アイテムに税込み価格を追加した新しいオブジェクトを生成
items.map(item => ({
...item, // 既存のプロパティを展開
priceWithTax: Math.floor(item.price * (1 + taxRate)), // 税込み価格を計算 (小数点以下切り捨て)
})),
// 依存配列: itemsまたはtaxRateが変化した場合のみ再計算
[items, taxRate]);

// 削除ハンドラ (関数をメモ化 : useCallbackが適切)
// 依存配列が空のため、コンポーネントのライフサイクル中は同じ関数参照が維持される
const handleDelete = useCallback((id: number) => {
console.log('削除:', id);
}, []);

// 画面描画
return (
<ul>
{/* 各アイテムをリスト要素として表示 */}
{itemsWithTax.map(item => (
<li key={item.id}>
{/* アイテム名と税込み価格を表示 */}
{item.name} - {item.priceWithTax}円
{/* 削除ボタン (押下時にhandleDeleteを呼び出し) */}
<button onClick={() => handleDelete(item.id)}>削除</button>
</li>
))}
</ul>
);
});
</syntaxhighlight>
 

== 注意事項 ==
==== 依存配列の不適切な指定 ====
<code>useMemo</code> の依存配列に必要な値を省略した場合、古いキャッシュが返され続けるバグが発生する。 
 
<syntaxhighlight lang="typescript">
// 正しい : calculateValueが参照する全ての値を依存配列に含める
const filtered = useMemo(() => {
return items.filter(item => item.key === filterKey);
}, [items, filterKey]);

// 誤り : filterKeyを依存配列に含めていないため、filterKeyが変化しても再計算されない
const filtered = useMemo(() => {
return items.filter(item => item.key === filterKey);
}, [items]); // filterKeyが欠落している
</syntaxhighlight>
 
ESLintの react-hooks/exhaustive-deps ルールを有効化すると、依存配列の欠落を自動検出できる。 
 
また、依存配列に毎回新しい参照が生成されるオブジェクト・配列を含めると、依存値が常に変化したと判定され、メモ化の効果がなくなる。 
 
<syntaxhighlight lang="typescript">
function ParentComponent() {
// 正しい : オブジェクトをuseMemoの外でuseState / useMemoで安定化させる
const [limit] = useState(10);
const stableResult = useMemo(() => compute(data), [data, limit]);

// 誤り : レンダリングのたびに新しいoptions配列が生成される
const result = useMemo(() => compute(data), [data, { limit: 10 }]);
// ^^^^^^^^^^^^^^^^^
// 毎回新しいオブジェクト参照が生成される
}
</syntaxhighlight>
 
==== メモ化の保証がない ====
Reactは特定の状況においてメモ化されたキャッシュを破棄する場合がある。 
 
メモ化が常に機能することを前提としたロジックは定義しないことを推奨する。 
 
キャッシュが破棄される可能性がある状況は以下の通りである。 
 
* React Strict Mode
*: 開発環境でのデバッグ目的でキャッシュが破棄される場合がある。
* Suspense
*: コンポーネントのサスペンド・再開によってキャッシュが破棄される場合がある。
* Reactの将来のバージョン
*: オフスクリーンコンポーネント等の機能でキャッシュ破棄が発生しうる。
 
<syntaxhighlight lang="typescript">
// 正しい : 副作用なしの純粋な計算のみをuseMemoに含める
const processedData = useMemo(() => heavyCompute(data), [data]);

// 誤り : useMemoのキャッシュに副作用のある処理を依存させている
const processedData = useMemo(() => {
const result = heavyCompute(data);
// キャッシュが破棄・再計算された場合、このカウンタは複数回インクリメントされる
analyticsCounter++;
return result;
}, [data]);
</syntaxhighlight>
 
==== 副作用をuseMemo内で行わない ====
<code>useMemo</code> は純粋な計算のみを含める必要がある。 
 
副作用 (APIリクエスト、DOMの直接操作、タイマの設定等) を <code>useMemo</code> 内で実行してはならない。 
副作用が必要な場合は、<code>useEffect</code> を使用する。 
 
<syntaxhighlight lang="typescript">
// 正しい : 副作用はuseEffectで処理して、useMemoは純粋な計算のみにする
useEffect(() => {
fetch(`/api/users/${userId}`).then(res => res.json()).then(setUser);
}, [userId]);

const userData = useMemo(() => computeDisplayData(localData), [localData]);

// 誤り : useMemo内でAPIリクエスト (副作用) を実行している
const userData = useMemo(() => {
fetch(`/api/users/${userId}`).then(res => res.json()).then(setUser);
return computeDisplayData(localData);
}, [userId, localData]);
</syntaxhighlight>
 
==== useMemoを使うべきでない場面 ====
以下に示す場面では、<code>useMemo</code> を使用しても効果がなく、むしろオーバーヘッドになる場合がある。 
 
<center>
{| class="wikitable"
|+ useMemoの使用が推奨されない場面
! 場面 !! 説明
|-
| 計算処理が軽い場合 || 単純な演算や短いリストの処理は、メモ化のコスト (依存配列の比較、キャッシュの保持) の方が高くなる場合がある。
|-
| 依存配列の値が頻繁に変わる場合 || 毎レンダリングごとに依存値が変化するなら、メモ化の再利用が全く発生しない。
|-
| コンポーネントが一度だけレンダリングされる場合 || キャッシュを再利用する機会がなければメモ化は無意味である。
|-
| プリミティブ値をメモ化する場合 || 数値や文字列等のプリミティブ値は、同じ値であれば参照も同じであるため、メモ化は不要である。
|}
</center>

 
パフォーマンスの最適化が必要かどうかは、React DevTools Profilerを使用して実測値に基づいて判断することを推奨する。 
 
<syntaxhighlight lang="typescript">
// 正しい : 軽い計算はメモ化せずに直接記述する
const doubled = count * 2;
const label = `ユーザ: ${name}`;

// 誤り : 軽い計算やプリミティブ値のメモ化 (不要なオーバーヘッド)
const doubled = useMemo(() => count * 2, [count]);
const label = useMemo(() => `ユーザ: ${name}`, [name]);
</syntaxhighlight>
 

== 関連情報 ==
* [https://react.dev/reference/react/useMemo 公式ドキュメント - useMemo]
* [https://react.dev/learn/react-compiler 公式ドキュメント - React Compiler]
* [[Reactの基礎 - Hooksの基礎]]
* [[Reactの基礎 - useState]]
* [[Reactの基礎 - useEffect]]
* [[Reactの基礎 - useCallback]]
* [[Reactの基礎 - カスタムHook]]
 

{{#seo:
|title={{PAGENAME}} : Exploring Electronics and SUSE Linux | MochiuWiki
|keywords=MochiuWiki,Mochiu,Wiki,Mochiu Wiki,Electric Circuit,Electric,pcb,Mathematics,AVR,TI,STMicro,AVR,ATmega,MSP430,STM,Arduino,Xilinx,FPGA,Verilog,HDL,PinePhone,Pine Phone,Raspberry,Raspberry Pi,C,C++,C#,Qt,Qml,MFC,Shell,Bash,Zsh,Fish,SUSE,SLE,Suse Enterprise,Suse Linux,openSUSE,open SUSE,Leap,Linux,uCLnux,電気回路,電子回路,基板,プリント基板,React,JavaScript,TypeScript,TSX,useMemo,useCallback,Hooks,メモ化,memoization,パフォーマンス最適化,React Compiler,依存配列,計算コスト
|description={{PAGENAME}} - 電子回路とSUSE Linuxに関する情報 | This page is {{PAGENAME}} in our wiki about electronic circuits and SUSE Linux
|image=/resources/assets/MochiuLogo_Single_Blue.png
}}

__FORCETOC__
[[カテゴリ:Rust]][[カテゴリ:Web]]

Reactの基礎 - useMemo - 版の履歴