Is this the proper way to wait for this function to finish before calling it again?(React-Native)

Question

I have a function that listens to Firestore database and fetches some data in realtime. Then it calls another function to make a calculation. Now, I wanna know if I am doing it the right way because I dont want the first function to call the second one before the second one is finished.

_fetchPatientsList() {
    function onResult(QuerySnapshot) { //first function
        this.setState({ dataSource: QuerySnapshot });
        this._calculateLocationDistance(); //second function
    }

    firestore()
        .collection('coolection').doc().collection('public')
        .where('act', '==', 1)
        .orderBy('time', 'asc')
        .limit(10)
        .onSnapshot(onResult, onError);
}

_calculateLocationDistance = () => {
  //some calculations
}

Answer 1

I don't have full context on what you're building but according to the docs, onSnapshot runs anytime the document's contents change. That may or may not be exactly what you want.

https://firebase.google.com/docs/firestore/query-data/listen

If you just want to guarantee ordering of the functions, you could do:

firestore()
        .collection('coolection').doc().collection('public')
        .where('act', '==', 1)
        .orderBy('time', 'asc')
        .limit(10)
        .then(onResult)
        .catch(onError);

or with async/await syntax:

try {
  const result = await firestore()
        .collection('coolection').doc().collection('public')
        .where('act', '==', 1)
        .orderBy('time', 'asc')
        .limit(10)

  onResult(result);
} catch (err) {
  onError(err);
}