With Firestore real time snapshot listeners, does arrayUnion and arrayRemove trigger a reload of the full array from the server?

Question

Using Firestore, React Native, RN Firebase, TypeScript.

I'm thinking about the pros and cons to use arrays to store bookmarks post Uids from the users.

I may even use it to generate a list of content for the user's bookmarks page, ordered by the latest, but I feel I would rather duplicate data with title and ImageURL into a separate collection for that specific use.

It is a content app, somewhat similar to a blog. The main use is to display a clickable bookmark icon in the list of posts on the homepage, as well as in the post's page. I'm anticipating bookmark collections up to 3000 items, while most would be under 100. We can imagine that a user could add up to 10 bookmarks in a row when he is on a reading spree.

I may listen to the user document, containing the array, like this (or separate it into another collection to avoid bloating the user doc):

import React, { useEffect } from 'react';
import firestore from '@react-native-firebase/firestore';

function User({ userId }) {
  useEffect(() => {
    const subscriber = firestore()
      .collection('Users')
      .doc(userId)
      .onSnapshot(documentSnapshot => {
        console.log('User data: ', documentSnapshot.data());
      });

    // Stop listening for updates when no longer required
    return () => subscriber();
  }, [userId]);
}

Then I could click on the bookmark icon in the homepage list or in the page. It would trigger such actions:

// Atomically add a new bookmark to the "bookmarks" array field.
var arrUnion = bookmarks.update({
  bookmarks: admin.firestore.FieldValue.arrayUnion('ItemId_127892')
});
// Atomically remove a bookmark from the "bookmarks" array field.
var arrRm = bookmarks.update({
  bookmarks: admin.firestore.FieldValue.arrayRemove('ItemId_127892')
});

However if the user has an array of 100 or 1000 items, I would prefer to avoid this to him reload the full array from the database each time he add a bookmark. It would certainly kill his data plan.

Another point is that I need the change to be immediatly seen on the UI. So that I also need a quick update in the listener's cache.

So, how does it works in detail, regarding data exchange with the cache and the server ?

Answer 1

However if the user has an array of 100 or 1000 items, I would prefer to avoid this to him reload the full array from the database each time he add a bookmark. It would certainly kill his data plan.

Not necessarily: if local caching is enabled (the default on Android and iOS), the second time a document is needed it will actually come from their local cache instead of retransferring the same data from the server.