I am building a series of shopify checkout UI extensions, because they have pulled the rug out from under us Shopify Plus customers and removed the ability to modify our checkout.liquid files. The system I am building is a rewards/points keeping system that tracks and rewards people for purchasing certain items. [[extensions.targeting]] module = "./src/Banner.tsx" target = "purchase.checkout.block.render" [[extensions.targeting]] module = "./src/LineItems.tsx" target = "purchase.checkout.cart-line-item.render-after" [[extensions.targeting]] module = "./src/Calculator.tsx" target = "purchase.checkout.reductions.render-after" All I want to do is share a single integer between all 3 components. This integer is just a multiplier for a points keeping/rewards system. I am new to react and have recently learned of useContext. But I'm not sure how to share it between 3 .tsx files. Really all my components kind of look like this below and I just want that one variable to be shared between all 3 of these components so that I can update it in one place. We frequently change these multipliers based on promotions so having it in a single spot is ideal. import { useEffect, useState, useRef } from 'react'; import { Heading, useApi, InlineLayout, Text, View, useApplyDiscountCodeChange, useDiscountCodes, useAppMetafields, reactExtension, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.reductions.render-after', () => <Extension />, ); function Extension() { const { extension, lines } = useApi(); const productMetaDatas = useAppMetafields({ type: "product", namespace: "custom", key: "entry_override_arbitrary_value" }); let multiplier = 40; let [messageHeader, setMessageHeader] = useState('Total Entries'); let [message, setMessage] = useState('You will receive 40 entries for every $1 spent!'); const discountCodes = useDiscountCodes(); const ApplyDiscountCodeChange = useApplyDiscountCodeChange(); useEffect(() => { let tempEntries = 0; lines.current.forEach(function (cartLineTarget) { // Get the product ID from the cart line item const productId = cartLineTarget?.merchandise?.product?.id; if (!productId) { return; } const productMetaData = productMetaDatas.find(({ target }) => { return `gid://shopify/Product/${target.id}` === productId; }); if (productMetaData?.metafield.value) { tempEntries += parseInt(productMetaData.metafield.value) * cartLineTarget.quantity; } else { tempEntries += Math.floor(cartLineTarget.cost.totalAmount.amount) * cartLineTarget.quantity * multiplier; } }); const bonusDiscountCodes = [ { 'FREESHIPPING2024': 50 }, { 'CLOWNSHOES': 20 }, ]; if (discountCodes.length > 0) { const isActiveDiscountCodeInBonus = bonusDiscountCodes.some(discountCodeObj => Object.keys(discountCodeObj).includes(discountCodes[0].code) ); if (isActiveDiscountCodeInBonus) { tempEntries += 50; } } setMessage(tempEntries); }, [message, messageHeader, lines, productMetaDatas, discountCodes]); return ( <InlineLayout columns={['fill', '20%']}> <View> <Heading level="2">{messageHeader}</Heading> </View> <View inlineAlignment="end"> <Text appearance="info">{message}</Text> </View> </InlineLayout> ); } Right now I've just duplicated the declared "multiplier" variable between all 3 components. But that's not an ideal situation. I know there is a simple solution but I cant for the life of me figure it out.