Solved

Infinity loop on checkout extension

erik_lindberg_s
Shopify Partner
16 3 5

Hope someone can help me out here and explain to me the behavior of React.

 

 

import {
    reactExtension,
    useApplyShippingAddressChange, useDeliveryGroups, useDeliveryGroup
} from '@shopify/ui-extensions-react/checkout';

// Choose an extension target
export default reactExtension(
    'purchase.checkout.block.render',
    () => <Extension />,
);

function Extension() {

    const deliveryGroups = useDeliveryGroups();
    const { selectedDeliveryOption } = useDeliveryGroup(deliveryGroups[0]);

    const applyShippingAddressChange = useApplyShippingAddressChange();

    /*const result = applyShippingAddressChange({
        type: 'updateShippingAddress',
        address: { city: selectedDeliveryOption.code }
    })*/

    console.log(selectedDeliveryOption)
}

 

 

 I'm trying to update the shipping address with the address from a Droppoint app.

The "selectedDeliveryOption" object is returned just fine. But as soon as I call "applyShippingAddressChange" in order to "updateShippingAddress" the extension function re-renders in infinity. 

Why is that and what can I do to prevent it?

 

Thx

 

Accepted Solution (1)
erik_lindberg_s
Shopify Partner
16 3 5

This is an accepted solution.

Thx. I thought assigning a function to a const would not call the function until the const was called. I was wrong. For reference to others I solved it like this.

 

function Extension() {
    const [shop, setShop] = useState('');

    const deliveryGroups = useDeliveryGroups();
    const { selectedDeliveryOption } = useDeliveryGroup(deliveryGroups[0]);
    const applyShippingAddressChange = useApplyShippingAddressChange();

    const delCode = selectedDeliveryOption?.code ? selectedDeliveryOption.code : '';

        useEffect(() => {
        if (delCode.includes('pakkeshopper')){
            setShop(delCode)
        }

        applyShippingAddressChange({
            type: 'updateShippingAddress',
            address: {
                city: shop.city
            }
        })
    }, [delCode]);
}

View solution in original post

Replies 2 (2)

SomeUsernameHe
Shopify Partner
468 53 89

The infinite loop in your checkout extension is likely happening because applyShippingAddressChange triggers a state update, causing the component to re-render, which then calls applyShippingAddressChange again and so on. To prevent this, ensure that applyShippingAddressChange is only called conditionally, not directly in the component's body but in response to an event or within a useEffect hook with appropriate dependencies to limit its execution.

Have I helped? Consider putting coffee in my mouth!
Buy Me a Coffee
erik_lindberg_s
Shopify Partner
16 3 5

This is an accepted solution.

Thx. I thought assigning a function to a const would not call the function until the const was called. I was wrong. For reference to others I solved it like this.

 

function Extension() {
    const [shop, setShop] = useState('');

    const deliveryGroups = useDeliveryGroups();
    const { selectedDeliveryOption } = useDeliveryGroup(deliveryGroups[0]);
    const applyShippingAddressChange = useApplyShippingAddressChange();

    const delCode = selectedDeliveryOption?.code ? selectedDeliveryOption.code : '';

        useEffect(() => {
        if (delCode.includes('pakkeshopper')){
            setShop(delCode)
        }

        applyShippingAddressChange({
            type: 'updateShippingAddress',
            address: {
                city: shop.city
            }
        })
    }, [delCode]);
}