剛接觸 useMemo 時，我以為它的核心作用就是用來做緩存。很多開發者都有類似誤解：認為 useMemo 主要是為了性能優化，以避免組件中不必要的重新計算。然而，經歷了五年的 React 開發，我才意識到 useMemo 的真正價值不只是性能——更關鍵的是，它能保持數據引用的穩定性，讓組件行為更加可預期。

為什么 useMemo 不僅僅是緩存

普遍的誤解是：useMemo 是個用來“記住”某些計算結果的魔法，使得相同輸入不會重復計算。雖然這種理解在技術層面沒錯，但用 useMemo 的更大收益在于確保引用（Reference）的穩定性。這在需要將某些數據傳遞給自定義 Hook 或作為依賴項使用時尤為重要。

設想一個場景：組件需要計算出某個對象，然后將這個對象當作參數傳給自定義 Hook。如果這個對象在每次渲染時都新建一個實例，即使內容相同，引用也不同，從而導致 Hook 誤以為數據每次都變了。這可能引發不必要的副作用或反復渲染。

我的經驗教訓：用對 useMemo

有一次，我在實現一個自定義計算 Hook 時遇到了類似問題。我在組件中內聯構建了一個對象，把已有的 bookingFields 和 values 合并后傳給 useCalculations：

const existingFields = {
    ...bookingFields,
    ...values,
};
const { calculations } = useCalculations(existingFields);

表面上看，這段代碼似乎沒啥問題。但不久后，我發現組件陷入了不停的重新渲染循環，計算結果也一直不穩定。問題的根源在于：雖然 existingFields 的內容沒變，但每次渲染都會生成一個新的對象引用。React 在比較依賴項時是根據引用來判斷變化的，所以自定義 Hook 認為數據“每次都更新了”。

拯救者 useMemo 登場

為了解決這個問題，我用 useMemo 將這個對象的創建過程包裹起來，讓它只有在依賴數據（bookingFields 和 values）改變時才重新生成對象：

const existingFields = useMemo(
    () => ({
        ...bookingFields,
        ...values,
    }),
    [bookingFields, values]
);

改寫之后，引用穩定下來，我的自定義 Hook 終于不再頻繁觸發重復計算，也不再讓組件重復渲染。一切變得井然有序。??

何時使用 useMemo

• 避免不必要的重渲染：當需要將派生出來的對象或數組作為依賴項傳給自定義 Hook 或子組件時，可以用 useMemo 穩定它的引用，從而避免組件不斷重新渲染。
  示例：有個子組件要接收一個數組作為 prop，用 useMemo 確保這個數組只有在源數據改變時才更新，而不是在每次父組件渲染時都生成新數組。
• 穩定依賴：在 useEffect 或 useCallback 中使用依賴項時，如果這些依賴項是對象或函數引用，useMemo 能確保在依賴項未實際變動時不觸發不必要的副作用。
• 復雜計算：對于計算量較大的數據處理，useMemo 可以確保只有在相關依賴變動時才重新計算，減少性能浪費。

何時不該使用 useMemo

如果你的計算非常簡單，或不依賴于外部動態數據，那么 useMemo 可能只是增加代碼的復雜性，而無實質收益。不必要的 memo 化會使代碼難以理解，并且可能沒有明顯的性能提升。

核心收獲

useMemo 的真正價值在于保持引用的穩定性，進而保證組件行為的可預測性。當我們減少了無意義的重復計算和渲染，性能自然得以提升。但要記住，不要一上來就為了“優化”而過度使用 useMemo。清晰的思路是：先確保組件的行為正確、可控，然后在需要時再考慮用 useMemo 來避免不必要的變化。

下次你準備用 useMemo 時，不妨問問自己：是因為需要穩定數據引用以避免無謂的重復工作，還是只是在做無意義的“過早優化”？只有真正理解它的用武之地，才能讓 useMemo 在你的 React 項目中發揮最大價值。