react native useState is not incrementing counter

Question

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 1

I doubt that the counter is really necessary here, I would suggest a solution with synchronious AsyncStorage.getItem

const [isLoading, setLoading] = useState(true);

useEffect(() => {
  const getPackages = async () => {
    try {
      const offerings = await Purchases.getOfferings();
      if (offerings.current !== null) {
        var counter = 0;

        await Promise.all(
          data.map(async (category, index) => {
            if (category.entitlement_id) {
              await AsyncStorage.getItem(category.entitlement_id).then(value => {
              });
            } else {
              console.log('ELSE COUNTER' + counter);
            }

          })
        );

        setLoading(false);
      } else {
        console.log('No offerings found');
      }
    } catch (e) {
      console.log('Error => ' + e);
    }
  };

  getPackages();
}, []);

Answer 2

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