RN Web + Firebase: snapshot listeners unsubscribe in unmount vs in global unmount (using context)

Question

In short: which is most memory + cost efficient way to use Firestore snapshot listeners, unmount them always at screen unmount or have the unsubscribe function in context and unmount when whole site "unmounts"?

Lets say in home screen I use snapshot listener for collection "events" which has 100 documents. Now I navigate through the site and return to home screen 2 more times during using the site. In this case which is better memory and cost efficiently wise (is there also other things to consider) and is there drawbacks?

1. to mount and unmount the listener on each mount and unmount of the home screen.
2. to mount on home screen and to unmount in whole site "unmount" (for example using window.addEventListener('beforeunload', handleSiteClose).

The usage of first is probably familiar with most but usage of the second could be done with something like this:

-Saving listener unsubscribe function in context with collection name as key:

const { listenerHolder, setListenerHolder } = DataContext();
    
useEffect(() => {

  const newListeners = anyDeepCopyFunction(listenerHolder);
  const collection = 'events';

  if (listenerHolder[collection] === undefined) {
    //listenerBaseComponent would be function to establish listener and return unsubscribe function
    const unSub = listenerBaseComponent();
    if (unSub)
      newListeners[collection] = unSub;
   }

  if (Object.entries(newListeners).length !== Object.entries(listenerHolder).length) {
     setListenerHolder(newListeners);
   }
}, []);

-Unmounting all listeners (in component that holds inside of it all screens and is unmounted only when whole site is closed):

const { listenerHolder, setListenerHolder } = DataContext();

  const handleTabClosing = () => {
    Object.entries(listenerHolder).forEach(item => {
      const [key, value] = item;
      if (typeof value === 'function') 
        value();
    });
    setListenerHolder({});
  }

  useEffect(() => {
    window.addEventListener('beforeunload', handleTabClosing)
    return () => {
      window.removeEventListener('beforeunload', handleTabClosing)
    }
  })

In both cases the home screen is showing most recent from "events" collection, but in my understanding...
-The first approach creates listener 3 times to collection "events" and so 3 x 100 read operations are done.
-The second approach creates listener 1 time to collection "events" and so 1 x 100 read operations are done.

If storing the unsubscribe function to context is possible and all listener unsubscribtions are handled at once in site unmount or in logout, doesn't this make using it this way super easy, more maintainable and more cost efficient? If I would need to see data from "events" collection in any other screen I would not have to do get call / create a new listener, because I would always have latest data from "events" when site is used. Just check if there is (in this case) collection name as key in global state "listenerHolder", and if there is, there would be most up to date data always for events.

Answer 1

Since there wasn't information from others about this use case I made some testing myself jumping from this "homescreen" to another screen back and forth multiple times. "Homescreen" has about 150 items and second screen 65.
The results are from Firebase, Cloud Firestore usage tab:
This is the result of reads from that jumping: 654(1.52pm-1.53pm) + 597(1.53pm-1.54pm) = 1251 reads

Now I tested the same jumping back and forth when using global context listeners: 61(1.59pm-2.00pm) + 165(2.00pm-2.01pm) = 226 reads

So using listeners in global context will result significantly less reads. This is depending how many times new listeners (in normal use case) would need to be recreated.

I have not yet tested well enough memory usage comparing these two cases. But if I test it, I will add the results here for others to benefit.