Infinity loop on checkout extension

[erik_lindberg_s]

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

[SomeUsernameHe]

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.

[erik_lindberg_s · 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]);
}