Skip to content
Advertisement

react native useState is not incrementing counter

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();
}, [])
User contributions licensed under: CC BY-SA
10 People found this is helpful
Advertisement