【React 學習筆記 EP.23】useMemo

什麼是 useMemo

useMemo 是 React 提供的一個 Hook，用來記住一段計算的結果，避免每次畫面重新渲染時都重複執行同樣的運算。

useMemo 概念

1. 快取計算結果：useMemo 會把函式的回傳值存起來，只有當依賴值改變時才重新計算。
2. 依賴陣列：你需要告訴程式「哪些值改變時才需要重新算」，這組值就放在依賴陣列裡。

useMemo 語法

1. () => computeValue(a, b)：一個函式，裡面放你想快取的計算邏輯。
2. [a, b]：依賴陣列，當 a 或 b 改變時，才會重新執行上面的函式。
3. result：回傳值，就是計算函式的結果。

import { useState, useMemo } from "react";

// 語法示範：const result = useMemo(() => computeValue(a, b), [a, b]);

export default function App() {
  const [count, setCount] = useState(0); // 一個簡單的計數器狀態
  const [text, setText] = useState("");  // 一個文字輸入狀態

  // 只有 count 改變時才重新計算，輸入文字時不會重算
  const doubled = useMemo(() => {
    console.log("計算中...");           // 用來觀察是否重新執行
    return count * 2;                 // 回傳 count 的兩倍
  }, [count]);                        // 依賴陣列：只監聽 count

  return (
    <div>
      <p>計算結果：{doubled}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <input value={text} onChange={(e) => setText(e.target.value)} />
    </div>
  );
}