Event calendar rerender optimization attempt

This commit is contained in:
Milan Paunovic
2024-10-20 13:04:26 +02:00
parent a9c02e880f
commit da071736d0
2 changed files with 40 additions and 13 deletions

View File

@ -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',
},
});

View File

@ -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>
);