← レッスン一覧に戻る

第3章: React Hooks

3-3. useMemo(メモ化)

useMemoを使って計算結果をキャッシュする方法を学びます

📚 このレッスンの理論を学びたい方はこちら:

React Hooks - useEffectとuseMemo

# 課題
1からnまでの合計を計算する重い処理をuseMemoでメモ化してください。

numberが変わった時だけ再計算されるようにしましょう。
    
import { useState, useMemo } from 'react';

export default function App() {
  const [number, setNumber] = useState(5);
  const [other, setOther] = useState(0);
  
  // ここにuseMemoを使って合計を計算してください
  
  return (
    <div>
      <p>1から{number}までの合計: {/* ここに計算結果を表示 */}</p>
      <button onClick={() => setNumber(number + 1)}>数を増やす</button>
      <button onClick={() => setOther(other + 1)}>他のボタン</button>
    </div>
  );
}