简体   繁体   中英

Is useCallback needed every-time a function is passed to a child component?

I am trying to better understand when and where useCallback is needed when passing functions to child components. I have a function declared in my parent component that redirects to a different page altogether. Trigger on a button click

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

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

I pass it to a child component which also renders the same button

<CartSummary handleCheckForGuestCheckoutRedirect={handleCheckForGuestCheckoutRedirect}/>

Triggered onClick

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

Since this function when triggered is just a redirect. Is useCallback needed here? And if so why?

No, as a matter of fact it's rarely needed and should be avoided unless it's determined you need it (you'll know when that is).

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM