When doing multiple updates with batch, the page is getting stuck in a loop - firebase

Question

I am trying to update multiple documents using batch() and commit().
The intended document are getting updated but the page goes still and I cannot click or go back or refresh the page.
However, when I console log the output message its going on a loop recursively.
let users_DB = db.collection( `users/${ profileEmail }/details` )
let currentDate = new Date()
users_DB.onSnapshot( ( querySnapshot ) =>
{
var batch = firebase.firestore().batch()
querySnapshot.forEach( ( doc ) =>
{
let dbDate = new Date( doc.data().dateInMills * 1000 )
if ( dbDate >= currentDate )
{
batch.update( users_DB.doc( doc.id ), {
'fees': parseInt( fees.value ),
'timeStamp': firebase.firestore.FieldValue.arrayUnion( firebase.firestore.Timestamp.fromDate( new Date() ) ),
} )
}
batch.commit().then(() => {console.log( 'changes made.' );})
} )
} )
How do I ensure avoid this behavior?

Answer 1

Because you are using the CollectionReference#onSnapshot method, you are listening for any changes to the data that matches the query. When you invoke batch.commit(), in addition to writing the new data to the server, all listeners will be notified that their data has changed - including your listener that's doing the update. Because you add a new element to the timeStamp field on every iteration, your code recursively calls itself.
To correct this, switch to a one time data retrieval using CollectionReference#get instead.
const users_DB = db.collection(`users/${profileEmail}/details`);
const currentDate = new Date();
users_DB
.get()
.then((querySnapshot) => {
const batch = db.batch(); // use db instead of firebase.firestore() for consistency
querySnapshot.forEach(doc => {
const dbDate = new Date(doc.get("dateInMills") * 1000); // dateInMills isn't in milliseconds?
if (dbDate >= currentDate) {
batch.update(doc.ref, {
'fees': parseInt( fees.value ),
'timeStamp': firebase.firestore.FieldValue.arrayUnion(firebase.firestore.Timestamp.fromDate(new Date())),
});
}
}
return batch.commit(); // this is a no-op if no changes are needed
})
.then(() => console.log("changes made"));
However, you can refine this with a query (which is how I would approach it):
const nowMS = Date.now(),
newData = {
fees: parseInt(fees.value),
timeStamp: firebase.firestore.FieldValue.arrayUnion(firebase.firestore.Timestamp.fromMillis(nowMS))
};
db.collection(`users/${profileEmail}/details`)
.where("dateInMills", ">=", nowMS / 1000)
.get()
.then(qs => {
const batch = db.batch();
qs.forEach(docSnap => {
batch.update(docSnap.ref, newData);
});
return batch.commit();
})
.then(() => console.log("changes made"));