Event calendar rerender optimization attempt

components/pages/calendar/EventCalendar.tsx

@@ -1,8 +1,8 @@
-import React, {useCallback, useMemo} from 'react';
-import {Calendar} from "react-native-big-calendar";
-import {StyleSheet} from "react-native";
-import {useGetEvents} from "@/hooks/firebase/useGetEvents";
-import {useAtom, useAtomValue, useSetAtom} from "jotai";
+import React, { useCallback, useMemo, useState, useEffect } from 'react';
+import { Calendar } from "react-native-big-calendar";
+import { StyleSheet, View, ActivityIndicator } from "react-native";
+import { useGetEvents } from "@/hooks/firebase/useGetEvents";
+import { useAtom, useAtomValue, useSetAtom } from "jotai";
 import {
     editVisibleAtom,
     eventForEditAtom,
@@ -10,22 +10,34 @@ import {
     selectedDateAtom,
     selectedNewEventDateAtom
 } from "@/components/pages/calendar/atoms";
-import {useAuthContext} from "@/contexts/AuthContext";
-import {CalendarEvent} from "@/components/pages/calendar/interfaces";
+import { useAuthContext } from "@/contexts/AuthContext";
+import { CalendarEvent } from "@/components/pages/calendar/interfaces";
 
 interface EventCalendarProps {
     calendarHeight: number;
 }
 
-export const EventCalendar: React.FC<EventCalendarProps> = React.memo(({calendarHeight}) => {
-    const {data: events} = useGetEvents();
-    const {profileData} = useAuthContext();
+export const EventCalendar: React.FC<EventCalendarProps> = React.memo(({ calendarHeight }) => {
+    const { data: events, isLoading } = useGetEvents();
+    const { profileData } = useAuthContext();
     const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
     const mode = useAtomValue(modeAtom);
     const setEditVisible = useSetAtom(editVisibleAtom);
     const setEventForEdit = useSetAtom(eventForEditAtom);
     const setSelectedNewEndDate = useSetAtom(selectedNewEventDateAtom);
 
+    const [isRendering, setIsRendering] = useState(true);
+
+    useEffect(() => {
+        if (events && mode) {
+            setIsRendering(true);
+            const timeout = setTimeout(() => {
+                setIsRendering(false);
+            }, 300);
+            return () => clearTimeout(timeout);
+        }
+    }, [events, mode]);
+
     const handlePressEvent = useCallback((event: CalendarEvent) => {
         setEditVisible(true);
         setEventForEdit(event);
@@ -47,7 +59,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(({calendar
     }, [setSelectedDate]);
 
     const memoizedEventCellStyle = useCallback(
-        (event: CalendarEvent) => ({backgroundColor: event.eventColor}),
+        (event: CalendarEvent) => ({ backgroundColor: event.eventColor }),
         []
     );
 
@@ -61,12 +73,22 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(({calendar
         [mode]
     );
 
+    const memoizedEvents = useMemo(() => events ?? [], [events]);
+
+    if (isLoading || isRendering) {
+        return (
+            <View style={styles.loadingContainer}>
+                <ActivityIndicator size="large" color="#0000ff" />
+            </View>
+        );
+    }
+
     return (
         <Calendar
             bodyContainerStyle={styles.calHeader}
             swipeEnabled
             mode={mode}
-            events={events ?? []}
+            events={memoizedEvents}
             eventCellStyle={memoizedEventCellStyle}
             onPressEvent={handlePressEvent}
             weekStartsOn={memoizedWeekStartsOn}
@@ -95,4 +117,9 @@ const styles = StyleSheet.create({
         width: 38,
         right: 42,
     },
+    loadingContainer: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
 });

contexts/ToDosContext.tsx

@@ -136,7 +136,7 @@ export const ToDosContextProvider: FC<{ children: ReactNode }> = ({
   };
 
   return (
-    <ToDosContext.Provider value={{ toDos, updateToDo, addToDo, maxPoints }}>
+    <ToDosContext.Provider value={{ toDos: toDos ?? [], updateToDo, addToDo, maxPoints }}>
       {children}
     </ToDosContext.Provider>
   );