Multiple execution of the checkout UI extension

[philieurokt]

Please list the package(s) involved in the issue, and include the version you are using

We are using "@shopify/checkout-ui-extensions-react": "^0.26.2"

Describe the bug

Steps to reproduce the behavior:

• Create a simple checkout UI extension using the CLI
• Render extension point Checkout::Dynamic::Render. Something like below

render('Checkout::Dynamic::Render', () => {
  console.count('Checkout::Dynamic::Render');
  return <App />
});

• Add the extension to one of the dynamic slots on the payment page
• Go to the storefront, add a product to the cart and start the checkout process.

Expected behavior

Since I only add the extension once to the payment page, I would expect the extension to execute only once.
The extension we are developing needs to make network calls. Thus, it is not ideal to have it run on every checkout page other than the one the extension is added to.
I also can't find a way to detect the current checkout step the execution is running on.

Screenshots

I can see at least three executions of the extension when going through the checkout pages and landed on the payment page (see below). The extension is only shown on the payment page.

Sometimes, I can see it run twice in the payment page as well.

Additional context

I'm testing the extension on a development store with the extension preview feature enabled.

[gil--]

Pretty sure this is due to the fact that react re-renders whenever the extension api updates (ie: changing line items, changing shipping methods, etc)

Just make sure you place things that only run once with useEffect or useState to manage re-renders.

[philieurokt]

Thanks @gil--

I don't think it is because of the react re-render but rather the render entry point got called multiple times.
If you look at the sample code above, the console.count('Checkout::Dynamic::Render') is in the render entry point.

I'm also seeing that the render entry point got invoked on the page where the extension has not been added. For example, if I add the extension to the payment page, the render entry point also got invoke in the Information and Shipping page. I can't find documentation anywhere on such behaviour.

[humphriest]

I'm using versions @shopify/ui-extensions-react": "2023.10.x with @shopify/app and @shopify/cli on 3.49.6.

I'm rendering the extension on 3 targets customer-account.order-status.block.render, purchase.thank-you.block.render and purchase.checkout.contact.render-after.

The Checkout Information and Order Status extensions are only loading once but the Thank You extension is always being loaded twice. I have even removed the Checkout Information and Order Status extensions and the Thank You extension is always being rendered twice.

I have pared back the App to the code below and it's still rendering twice.

const App = (props) => {
  useEffect(() => {
    console.log(process.env.NODE_ENV);
  }, []);

  return (
    <BlockStack
      border="base"
      padding="base"
      borderRadius="base"
      spacing="tight"
    >
      <Text>Test</Text>
    </BlockStack>
  );
};

[philieurokt]

It looks like the other pages are fixed. However, it seems the Thank You Page is still having issue with rendering twice. See #1435

[humphriest]

Ah ok, thanks for linking the issue @philieurokt 👍

[caoyuanqi]

Just found a walk around using useExtesnion hook. It provides an object called rendered.

https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/metadata/useextension

If we do logic when the rendered.current flag is true, the multiple execution behavior disappears. If you don't need the pre-render behaviour, you can do the same thing.

The rendered object's type is StatefulRemoteSubscribable, looks like it encourage user to use the observable pattern. So I am not sure whether the current prop always trigger re-render. to be safe, may use current and subscribe together.

[jeanffc]

Is there a way to avoid the pre-render instead?

[jackthedev]

I'm still facing the same issue with the "purchase.thank-you.block.render" target. We're ready to deploy an extension to one of our live apps, but we're encountering a problem where the component renders twice. This is causing a significant issue for us as we use an External API to dynamically populate the UI components of our extension, and the double render results in two API requests almost simultaneously.

I've tested this with other targets and confirmed that this double rendering issue seems unique to the "purchase.thank-you.block.render" target. Is there a reason for this behavior that I might be overlooking, or is this a bug?

[cjayalmontecm]

I'm still facing the same issue with the "purchase.thank-you.block.render" target. We're ready to deploy an extension to one of our live apps, but we're encountering a problem where the component renders twice. This is causing a significant issue for us as we use an External API to dynamically populate the UI components of our extension, and the double render results in two API requests almost simultaneously.

I've tested this with other targets and confirmed that this double rendering issue seems unique to the "purchase.thank-you.block.render" target. Is there a reason for this behavior that I might be overlooking, or is this a bug?

@jackthedev have you fix it ? I have same issue, causing it to do multiple request in our api simultaneously.

[kirillplatonov]

Same issue, double rendering causes redundant API calls. Having a configuration setting to turn it off would be great.

[UsamaHussainSquatWolf]

Facing same issue, I am using 'purchase.checkout.block.render' as extension target.

[bpfullmetal]

Anyone find a solution here?