每次將 function 傳遞給子組件時都需要 useCallback 嗎？

Question

我試圖更好地了解在將函數傳遞給子組件時何時何地需要 useCallback。 我在我的父組件中聲明了一個 function ，它完全重定向到不同的頁面。 觸發按鈕單擊

const handleCheckForGuestCheckoutRedirect {
    handleGTMCheckout({ step: '1' })

    if (customer) {
      router.push(paths.CHECKOUT_DELIVERY)
    } else {
      router.push(paths.CHECKOUT_LOGIN)
    }
}

我將它傳遞給一個子組件，該組件也呈現相同的按鈕

<CartSummary handleCheckForGuestCheckoutRedirect={handleCheckForGuestCheckoutRedirect}/>

觸發 onClick

 <Button
   onClick={handleCheckForGuestCheckoutRedirect}
   variant="solid"
   size="xl"
   width="100%"
   fontWeight="extrabold"
   fontSize={{ base: 'mobile.body', md: 'desktop.body' }}
 />

因為這個 function 在觸發時只是一個重定向。 這里需要useCallback嗎？ 如果是這樣，為什么？

Answer 1

不，事實上它很少需要並且應該避免，除非它確定你需要它（你會知道什么時候需要它）。

https://kentcdodds.com/blog/usememo-and-usecallback