POS UI Extension: Customer details block renders multiple times

Extensions
1

Hi everyone,
I’m running into an issue with a Shopify POS extension and would appreciate some guidance.

Setup:

  • pos.customer-details.block.render → renders a customer details block
  • pos.customer-details.action.render → opens a detailed action page when the block is clicked

Issue:
When I navigate back from pos.customer-details.action.render to the block, the pos.customer-details.block.render unexpectedly re-renders multiple times. This causes my extension state/data to refresh, leading to inconsistent behavior.

Questions:

  • Is this expected?
  • If so, what’s the best way to persist state across these re-renders?
  • If not, could it be a bug in the POS extension lifecycle?

Screenshot 1

Screenshot_20250820-124916
Screenshot_20250820-124916864×1920 163 KB

Screenshot 2

Screenshot_20250820-124938
Screenshot_20250820-124938864×1920 148 KB

Screenshot 1 is before pos.customer-details.action.render is performed and Screenshot 2 is post the action. It can be seen that the POSBlockRow is rendered twice. It keeps doubling everytime I open the modal through pos.customer-details.action.render and close it

2

@Raj_Laddha I assume you’re storing your wishlist items in an array or similar structure. Can you check if the length of this array increases each time you add an item?

console.log(wishlistItems.length);

You can view your logs in the CLI.

3

Hi @Victor_Chu . Confirmed it via logs. The items length remains the same. Actually I’m not even performing any actions on the list. Simply opening the modal and closing itself is cauing the issue.

Sample code template in case it helps -

<POSBlock>
    <POSBlockRow onPress={(wishlists && wishlists.length > 0) ? () => {
        api.action.presentModal();
    } : undefined}>
        <Stack direction='vertical' spacing={2}>
            {(wishlistItems)?.slice(0, 4).map((product) => {

                return (
                    <Stack key={`${product.variantId}`} direction="horizontal" flexWrap={'nowrap'} spacing={2}>
                          ...
                    </Stack>
                );
            })}
        </Stack>
    </POSBlockRow>
</POSBlock>
4

Hi @Raj_Laddha It is a bug, not an intended functionality. We’re working on a fix for it. Thanks for flagging

5

Thanks for confirming @JS_Goupil . I’m seeing similar behaviour in the Product Details block as well. I hope that will be addressed too.

6

@Raj_Laddha A couple more questions:

  • What POS version are you testing with?
  • Curious about your wishlist code - is it being pulled from a remote source and then data is stored in useState? Is the duplicate/repeating UI on customer details a consistent visual artifact or does the block sometimes flash instead?
  • For products details, are you seeing duplicated UI as well, or does re-rendering cause a different visual artifact (flashing, etc)?
7

Hey @katriciashopify . Answering to your questions -

  • What POS version are you testing with?
    • 10.9.1
  • Curious about your wishlist code - is it being pulled from a remote source and then data is stored in useState? Is the duplicate/repeating UI on customer details a consistent visual artifact or does the block sometimes flash instead?
    • Yeah its been pulled via an API and stored in react state. It has a consistent visual artifact which appears only when you perform block action. But yeah - it also does flash at times
  • The same issue i.e. duplicated UI rendering on performing block actions