Search code examples
javascriptreactjsusecallback

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?

Solution

  • 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