diff --git a/lib/commerce/index.tsx b/lib/commerce/index.tsx index c024df5de..8de21fdf3 100644 --- a/lib/commerce/index.tsx +++ b/lib/commerce/index.tsx @@ -35,7 +35,20 @@ export function CommerceProvider({ children, config }: CommerceProps) { throw new Error('CommerceProvider requires a valid config object') } - return {children} + // Because the config is an object, if the parent re-renders this provider + // will re-render every consumer unless we memoize the config + const cfg = useMemo( + () => ({ + fetcher: config.fetcher, + locale: config.locale, + cartCookie: config.cartCookie, + }), + // Even though the fetcher is a function, it's never expected to be + // added dynamically (We should say that on the docs for this hook) + [config.fetcher, config.locale, config.cartCookie] + ) + + return {children} } export function useCommerce() {