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).
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.