I’m guessing this Shopify bug is causing you to try this workaround as it did for me. Check out a workaround there, but it’d be great if someone from Shopify could give this one a little more light.
Topic summary
Issue: A Shopify Checkout UI extension aims to detect when “Pickup” is selected via useDeliveryGroups/useDeliveryGroup and set a custom attribute for discount logic. The current implementation tried calling these hooks inside useEffect (not allowed in React), and moving them to the top level leads to repeated re-renders/loops when Pickup is selected and the page is refreshed.
Key points:
- Hooks (useDeliveryGroups, useDeliveryGroup, useAttributeValues, useApplyAttributeChange) must be called at the top level of the component, not inside useEffect.
- Applying attribute updates (updateAttribute) may be triggering state changes that cause further renders; author reports loops even when checking the attribute value before updating.
- A community member links a suspected related Shopify UI Extensions bug (GitHub issue #1173) and references a workaround there, requesting Shopify clarification.
Context/terms:
- React hooks: functions that manage state/effects; must be used at component top level.
- Delivery group: the selected shipping/pickup option group in Checkout.
- Attribute: a cart/checkout attribute being set to flag Pickup.
Status: No confirmed fix in-thread. Suggested next step is to follow the GitHub issue’s workaround while awaiting an official Shopify update. Code snippet is central to understanding the issue.