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();
}, [])

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();
}, [])


Source: stackoverflow