When counter is >= data Array length setLoading should trigger. But counter is not being incrementing until I refresh app by pressing CTRL+S then counter increment itself by 1 every time app refreshes.
const [loopCount, setLoopCount] = useState('1'); const [isLoading, setLoading] = useState(true); useEffect(() => { const getPackages = async () => { try { const offerings = await Purchases.getOfferings(); if (offerings.current !== null) { var counter = 0; data.forEach((category, index) => { //data is array with length of 6 if(category.entitlement_id){ AsyncStorage.getItem(category.entitlement_id).then((value) => { console.log("Loop COUNT before is : "+loopCount); setLoopCount(loopCount+1); //This should increment on every iteration of forEach console.log("Loop COUNT after is : "+loopCount); }); }else{ console.log("ELSE COUNTER" + counter); setLoopCount(loopCount+1); } if(loopCount >= data.length){ //if counter is >= data length do something setLoading(false); } }) }else{ console.log("No offerings found"); } } catch (e) { console.log("Error => " + e); } } getPackages(); }, [])
Advertisement
Answer
Updating state is an asynchronous operation, so getting loopCount
in for loop will get the initial loopCount
value instead of updated value. If you don’t need UI update for updating loopCount
, you can use useRef
instead of useState
:
const loopCount = useRef(1); const [isLoading, setLoading] = useState(true); useEffect(() => { const getPackages = async () => { try { const offerings = await Purchases.getOfferings(); if (offerings.current !== null) { var counter = 0; data.forEach((category, index) => { //data is array with length of 6 if(category.entitlement_id){ AsyncStorage.getItem(category.entitlement_id).then((value) => { console.log("Loop COUNT before is : "+loopCount.current); loopCount.current = loopCount.current+1; //This should increment on every iteration of forEach console.log("Loop COUNT after is : "+loopCount.current); }); }else{ console.log("ELSE COUNTER" + counter); loopCount.current = loopCount.current+1; } if(loopCount.current >= data.length){ //if counter is >= data length do something setLoading(false); } }) }else{ console.log("No offerings found"); } } catch (e) { console.log("Error => " + e); } } getPackages(); }, [])