還記得當初學到hooks時，是多麽的想把每個都拿來用用看，因為超酷的！但有時，有些衝動是該好好的克制一下。今天我們就來談談其餘的build-in hooks。

有關useMemo

前端開發者有種恐懼是害怕在組件中從調用函數並賦值變量，因此大量使用useMemo。如以下的範例：

// 特定情況下比較會被討厭的寫法
export function App({ username, dataType }) {
    const computedResult = useMemo(() => {
        return getComputedResult(username, dataType);
    }, [page, dataType])
    
    return <HeavyComponent computedResult={computedResult} />
}

針對上述例子，開發者會這樣說：我們不該不必要地重新render HeavyComponent，所以要記憶計算結果。

正如大家說熟知的：useMemo hook是為了防止每次組件重新render時會重複出現大量計算因此造成效能阻礙。因此，我們使用它之前必須問自己：

函式會牽扯大量的操作嗎？

事實上，在大多數情況下，它不會牽扯到多大量的操作。而且，讓React管理一個memo的成本有時候是大幅超過你以為useMemo可以獲得的效能優勢。

有兩種情況我們可以大膽的直接從組件中調用函式：

1. 如果計算結果是為一個primitive types，我們不必擔心HeavyComponent會重新render。
2. 如果值沒有變化，它也不會重新render。

因此我們可以把原先的寫法改成：

// 特定情況下不會被討厭的寫法
export function App({ username, dataType }) {
    const computedResult = getComputedResult(username, dataType);
    
    return return <HeavyComponent computedResult={computedResult} />
}

關於useCallback

關於useCallback hook事實上也是被大量濫用的。主要有兩類情況

1. 為了設置初始狀態並預防無止境的render-loop。事實上，在這種情況下，我們應該用useEffect比較適切。
2. 為了記憶結果。在這種情況下，useMemo最適合的。老實說，更多時候，我們連useMemo也不用，因為只是想在計算僅屬於組件中需要的東西。

事實上，關注過React本身原始碼的都知道，不正確地使用useCallback實際上會使性能更加惡化。