Populating React-Big-Calendar with newly added events without refreshing using Firebase onSnapshot

Question

I'm currently trying to get React-Big-Calendar to populate a newly added event real-time. I am using the code below and it does the job. Events will be added to the calendar immediately after it is created/modified/deleted. However, it is performing reads even when I am not adding or deleting an event from the calendar. Within 5 minutes of leaving the calendar to run, I will have exceeded my daily limit of 50k reads from Firestore. Am I using the right approach? My goal is to update the calendar without refreshing when a new event is added/modified/deleted. Is there a way to only update the calendar when a change/update happens? When I console.log(snapshot.docChanges()), it returns the data and all the types are added regardless of whether they are old data as they were not recently added. Is this normal?

Also, I'm not too sure about how and when to use the unsubscribe() function. When should I be calling it? Correct me if I'm wrong, but right now, by returning unsubscribe() at the end, it's suppose to act like componentWillUnmount.

//events are used in calendar
const [events, setEvents] = useState([] as CalendarEvent[]);

//onSnapshot to check for real-time updates
useEffect(() => {
    const unsubscribe = firebase
      .firestore()
      .collectionGroup("bookings")
      .where("orgId", "==", props.orgId ? props.orgId : null)
      .onSnapshot((snapshot) => {
        const bookedEvents: any = [];
        snapshot.forEach((doc) => bookedEvents.push({ ...doc.doc.data() }));

//creates an eventlist so the calendar can call individual events
        const eventList = bookedEvents.map((event: any) => {
          return {
            title: event.title,
            start: new Date(
              moment(event.time.startTime * 1000).format("YYYY-MM-DD HH:mm:ss")
            ),
            end: new Date(
              moment(event.time.endTime * 1000).format("YYYY-MM-DD HH:mm:ss")
            ),
            eventId: event.eventId,
            name: event.participants.name,
            email: event.participants.email,
            phoneNumber: event.phoneNumber,
            itemQuantity: event.itemQuantity,
            memberBookingType: event.memberBookingType,
          };
        });

//sets the eventlist as events for calendar
        setEvents(eventList as CalendarEvent[]);
      });

//componentWillUnmount unsubscribe();
    return () => {
      unsubscribe();
    };
  });

Answer 1

You have no dependency list defined on your useEffect, so it is likely being rerun on every rerender of the component. And, since it's making the 'first' call every time it runs...

You only want it to subscribe on mount, and unsubscribe when it unmounts. The React hooks documentation has pretty clear examples on just this, by providing an empty dependency array.

useEffect(() => {
  const unsubscribe = subscribe(); // paraphrasing here
  return () => {
    unsubscribe();
  };
}, []};

If the subscription is returning all events every time there's a change, then calling setEvents with the full array will rerender every event, not just the ones that have changed. This may be what you want.

Also, you can use destructuring in your .map() as well, to simplify your code.

const eventList = bookedEvents.map((event: any) => {
  const {time: {startTime, endTime}, ...thisEvent} = event;
  return {
    ...thisEvent,
    start: new Date(
      moment(startTime * 1000).format("YYYY-MM-DD HH:mm:ss")
    ),
    end: new Date(
      moment(endTime * 1000).format("YYYY-MM-DD HH:mm:ss")
    ),
  };
});