Checkout UI Extension - useShippingAddress API

Shopify Plus
,

Topic summary

A developer is building a checkout UI extension to display conditional notes based on customer shipping addresses (specifically targeting state/province codes) using Shopify’s useShippingAddress API.

Current Issue:

  • The extension works initially but stops functioning after the first render
  • Example: A note displays when country code is NOT “CA”, but once hidden, it doesn’t reappear

Technical Problem:

  • The React component needs to return something to trigger re-renders and updates
  • Without a proper return value, the component cannot re-render when shipping address data changes

Context:

  • Developer is following Shopify’s Checkout UI Extensions documentation and Standard API guides
  • Screenshots show code implementation and the expected behavior
  • Seeking help to resolve the re-rendering issue
Summarized with AI on November 16. AI used: claude-sonnet-4-5-20250929.
1

Hello, I am trying to build an extension where if customers select certain address (state/ provinceCode), a note is displayed. I am using useShippingAddress API and following ‘Extension APIS’ this part of the documentation:

NMaskey_1-1695236219894.png
NMaskey_1-1695236219894.png1290×602 68.7 KB

The issue is - it works once i.e. a note is displayed, if CA is not the country code, it’s hidden but it does not work anymore.

There is also an issue with the snippet that React needs the function to return something, it cannot render nothing so this also needs an update.

NMaskey_0-1695236204614.png
NMaskey_0-1695236204614.png1039×167 11 KB

Any help is appreciated.

Thanks