if (isApplied && moreCount === 0 && route !== cartUrl && bagCouponActive) {
return (
<StickyBottomFooter bottom={bottomPosition}>
<Confetti fire />
<FlexBox
spacing="py24 m-py12"
align="center"
justify="center"
position="row"
fullWidth
style={{
background: 'var(--secondary-green)',
height: isMobile ? '40px' : '56px',
}}
>
<Text size="16_24" mobileSize="14" thickness="medium" color="white">
Congrats! you’ve unlocked '{couponCode}' offer
</Text>
I am using Confetti to show this but appears everytime in every refresh these need to be get call only once in the home page
If you mean only once and keep it through refreshes, you need to store somewhere information that your confetti fired, for example in localStorage/sessionStorage:
localStorage.set('fired',true)
and then just check if it was fired before
<Confetti fire={localStorage.get('fired')} />
If you want to reset this state on page refresh and keep it only though router changes and redirects, just keep this information in useState or Redux store