useMemo — 計算結果のメモ化

const value = useMemo(
  () => calculateValue(), // 第1引数: 計算して値を返す関数
  [deps], // 第2引数: 再計算する条件を並べた依存配列
);

function UserList({ users }: { users: User[] }) {
  // 再レンダーのたびに、このソート処理が毎回走る
  const sorted = users.slice().sort((a, b) => a.name.localeCompare(b.name));
 
  return (
    <ul>
      {sorted.map((u) => (
        <li key={u.id}>{u.name}</li>
      ))}
    </ul>
  );
}

import { useMemo } from 'react';
 
function UserList({ users }: { users: User[] }) {
  const sorted = useMemo(
    () => users.slice().sort((a, b) => a.name.localeCompare(b.name)),
    [users], // usersが変わったときだけ再計算する
  );
 
  return (
    <ul>
      {sorted.map((u) => (
        <li key={u.id}>{u.name}</li>
      ))}
    </ul>
  );
}

function Example({ userId }: { userId: string }) {
  // useMemo — レンダー中に同期的に計算。結果はすぐJSXで使える。
  const displayName = useMemo(() => {
    return computeExpensiveName(userId);
  }, [userId]);
 
  // useEffect — レンダー後に非同期で実行。結果が届くのは次の再レンダー以降。
  useEffect(() => {
    fetchUserProfile(userId).then(setProfile);
  }, [userId]);
 
  return <p>{displayName}</p>;
}

// useRef — 自分で書き換えるまでずっと同じ値
const timerIdRef = useRef<number | null>(null);
 
// useMemo — usersが変わったら自動的にソートし直す
const sorted = useMemo(() => sortUsers(users), [users]);

// useMemoなし → レンダーのたびに新しいオブジェクト
// → useEffectの依存配列が毎回「変わった」と判定される
function Dashboard({ filters }: { filters: { status: string } }) {
  const params = { status: filters.status, limit: 10 };
 
  useEffect(() => {
    fetchData(params).then(setData);
  }, [params]); // paramsが毎回新しいのでエフェクトも毎回走る
}

// useMemoあり → filters.statusが変わったときだけ新しいオブジェクト
function Dashboard({ filters }: { filters: { status: string } }) {
  const params = useMemo(() => ({ status: filters.status, limit: 10 }), [filters.status]);
 
  useEffect(() => {
    fetchData(params).then(setData);
  }, [params]); // paramsの参照が安定する
}

// 10,000件のデータをフィルタ + ソート → メモ化する価値がある
const results = useMemo(() => {
  return items
    .filter((item) => item.category === selectedCategory)
    .sort((a, b) => b.score - a.score);
}, [items, selectedCategory]);

// メモ化不要 — テンプレートリテラルの結合は一瞬で終わる
const fullName = `${firstName} ${lastName}`;
 
// メモ化不要 — 5件の配列のmapは十分高速
const labels = items.map((item) => item.label);

// 過剰なメモ化 — 読みにくくなるだけで効果がない
const greeting = useMemo(() => `こんにちは、${name}さん`, [name]);
 
// そのまま書いた方がよい
const greeting = `こんにちは、${name}さん`;