你有沒有遇過這種情況：父元件更新後，明明子元件的 props 沒有改變，卻還是跟著重新渲染？
這時候，React.memo 就派上用場了。

概念解釋

React.memo 是一個 高階元件 (HOC)，它會「記住上一次的渲染結果」。

• 如果 props 一樣 → 跳過重新渲染，直接重用舊結果。
• 如果 props 不一樣 → 照常重新渲染。

它的運作方式就像 Class Component 的 PureComponent，但專門給 Function Component 用。

範例程式碼

沒有 React.memo

function Child({ name }) {
  console.log("Child render");
  return <div>{name}</div>;
}

function App() {
  const [count, setCount] = useState(0);
  return (
    <>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <Child name="Andy" />
    </>
  );
}

• 每次按下按鈕，App 重新渲染，Child 也會重新渲染。
• 即使 name="Andy" 沒有改變。

使用 React.memo

const Child = React.memo(function Child({ name }) {
  console.log("Child render");
  return <div>{name}</div>;
});

• 當 App 重新渲染時，如果 Child 的 name 沒變，React 就直接跳過它。

常見誤解 / 陷阱

1. 不是自動效能提升

   • React.memo 本身有比較成本，如果元件很輕量，甚至可能更慢。

2. 物件 / 陣列 / 函式 props 問題

   • 每次 render 都會建立新 reference，即使內容一樣也會觸發 re-render。
   • 解法：搭配 useMemo / useCallback 固定 reference。

3. Context 更新照樣會觸發

   • 使用 useContext 的元件，即使有 memo，Context 改變仍會 re-render。

實務應用

• 適合用在：列表項目、大型元件、昂貴運算的結果。
• 不適合用在：簡單 UI、props 常常改變的元件。

小練習

👉 判斷以下 Child 會不會 re-render：

const Child = React.memo(({ data }) => {
  return <div>{data.value}</div>;
});

function App() {
  const [count, setCount] = useState(0);
  return (
    <>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <Child data={{ value: 1 }} />
    </>
  );
}

答案：會 re-render，因為 { value: 1 } 每次 render 都是新的物件 reference。

面試回答

React.memo 是一個 HOC，用來避免不必要的 re-render。它會記住上一次的結果，如果 props 沒改變，就跳過渲染。預設是做淺比較，傳物件或函式要搭配 useMemo / useCallback 才能穩定。

總結

• React.memo：跳過 props 沒變的子元件 render。
• 適用於「重 UI、props 穩定」的元件。
• 有比較成本，不是萬靈丹，要謹慎使用。