title: React Native Expo Firestore Incremental Counter
body: <p>Having a hard time figuring out what I'm doing wrong here. I have a counter that should be adding 1 each time it is pressed to the firestore field of an authenticated user. It works but only one the 2nd tap. So then the displayed number after the first tap is different from what's on the database. Each subsequent tap does +1 to both the display counter and the database.</p>
  <pre><code>
  const BuyCreditsScreen = () =&gt; {
  
      //state objects
      const [credits, setCredits] = useState(0);
      
      //Get current user through authentication
      const user = auth.currentUser;
  
  
      useEffect(() =&gt; {
          async function getCredits(){
              //Create variable for users document with this user id
              const docRef = await doc(db, 'users', user.uid);
              const docSnap = await getDoc(docRef);
  
              //If there is a snapshot of data then setUsername to 'Name' from database
              if (docSnap.exists()) {
                  setCredits(docSnap.data().credits);
                  console.log(credits)
                  } else {
                  // doc.data() will be undefined in this case
                  console.log(&quot;Did not retreive credits&quot;);
                  }
          }
          getCredits();
      }, []);
  
      //Buy 1 Credit Function
      const buy1Credit = async () =&gt; {
          //Create variable for users document with this user id
          await updateDoc(doc(db, 'users', user.uid), {
              credits: credits,
          })
          await setCredits(credits + 1);
      }
  
      
          
          
      return &lt;View style={styles.container}&gt;
      &lt;Text style={{paddingBottom: 25}}&gt;
          Buy Credits
      &lt;/Text&gt;
      &lt;Text style={{paddingBottom: 25}}&gt;
          Current Credits: {credits}
      &lt;/Text&gt;
  
  
      &lt;TouchableOpacity
      style={styles.button}
      onPress={buy1Credit}&gt;
      &lt;Text style={styles.buttonText}&gt;Buy 1 Credit&lt;/Text&gt;
      &lt;/TouchableOpacity&gt;
      &lt;/View&gt;
  
  }
  
  
  const styles = StyleSheet.create({
      container: {
          alignItems: 'center',
          paddingTop: 50,
      },
      button: {
          backgroundColor: '#0782F9',
          padding: 15,
          borderRadius: 5,
          alignItems: 'center',
          width: '60%',
          marginTop: 20
      },
      buttonText: {
          color: 'white',
          fontWeight: '700',
          fontSize: 16
      }
  });
  
  export default BuyCreditsScreen;
  </code></pre>