Ecommerce Shopify WordPress Discussion

shopify checkout extension infinite loop problem

I am making my first shopify checkout app for the shipping page and I have this issue, when I use "useSubscription" to update a value it makes an infinite loop (I have 'test' in my console infinitly), how do I fix this pls? I don't know if it is a useEffect problem as I don't use react much, but I do know that with an empty dependency array it should be fecthing data only once at the first render, by the way when I comment the useSubscription part, I have, at the first render, 16x 'test' logged when I have only 4 shippingMethods, when I start without commenting this part and change the shipping method it goes on an infinite loop. here my code import { Text, useApi, useTranslate, reactExtension, useSubscription, } from '@shopify/ui-extensions-react/checkout'; import { useEffect, useState } from 'react'; import i18nIsoCountries from 'i18n-iso-countries'; i18nIsoCountries.registerLocale(require("i18n-iso-countries/langs/en.json")); export default reactExtension( 'purchase.checkout.shipping-option-item.render-after', () => <Extension />, ); function Extension() { const { shop, shippingAddress, lines, target, query, i18n, applyAttributeChange, isTargetSelected, deliveryGroups } = useApi(); const translate = useTranslate(); const [items, setItems] = useState([]); const [dalMin, setDalMin] = useState(); const [dalMax, setDalMax] = useState(); console.log('test') const country = i18nIsoCountries.getName(shippingAddress.current.countryCode, 'en'); const shopDomain = shop.myshopifyDomain; const shippingMethodTitle = target.current.title; const _deliveryGroups = useSubscription(deliveryGroups); useEffect(() => { if (isTargetSelected.current) { updateAttributes(); } }, [_deliveryGroups]); const updateAttributes = async () => { if (isTargetSelected.current && dalMin && dalMax) { const res = await applyAttributeChange({ type: 'updateAttribute', key: 'dal_min', value: dalMin.toISOString().slice(0, 10), }); await applyAttributeChange({ type: 'updateAttribute', key: 'dal_max', value: dalMax.toISOString().slice(0, 10), }); console.log(res); } } useEffect(() => { async function fetchSkus() { try { const res = await query(`{ nodes(ids:[${lines.current.map((l) => `"${l.merchandise.id}"`).join(',')}]){ ...on ProductVariant{ sku } } }`); if (res.errors) { const err = new Error('Failed to fetch skus'); err.errors = res.errors; throw err; } setItems(res.data.nodes); } catch (err) { console.error(err) } } async function fetchDal() { try { await fetchSkus(); // post request to personal api to calculate dalMin and dalMax that are specific dates const json = await res.json(); setDalMin(new Date(json.dals[0].dalMin)); setDalMax(new Date(json.dals[0].dalMax)); } } catch (err) { console.error(err) } } fetchDal(); }, []); if (dalMin && dalMax) { return ( <Text size='small' appearance='subdued'> {translate('delai', { dalMin: i18n.formatDate(dalMin, { dateStyle: 'short' }), dalMax: i18n.formatDate(dalMax, { dateStyle: 'short' }) })} </Text> ); } } the "type:success" object comes from the log in "updateAttributes" function
I found the solution, in react do not use useSubscription, use the shopify hooks, hard to find this info by the way (or am I blind? I don't know), for this situation I did that const { isTargetSelected, shippingOptionTarget } = useShippingOptionTarget(); const applyAttributeChange = useApplyAttributeChange(); const updateAttributes = async () => { if (isTargetSelected && dalMin && dalMax) { await applyAttributeChange({ type: 'updateAttribute', key: 'dal_min', value: dalMin.toISOString().slice(0, 10), }); await applyAttributeChange({ type: 'updateAttribute', key: 'dal_max', value: dalMax.toISOString().slice(0, 10), }); } } if (isTargetSelected && shippingOptionTarget) { updateAttributes(); } and with that when the client changes the shipping method it updates the attributes

February 4, 2024

TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.