improve week component performance

Author: yuvalsho

src/expandableCalendar/week.tsx

@@ -1,5 +1,5 @@
 import XDate from 'xdate';
-import React, {useRef, useMemo} from 'react';
+import React, {useRef, useMemo, useCallback} from 'react';
 import {View} from 'react-native';
 
 import {getPartialWeekDates, getWeekDates, sameMonth} from '../dateutils';
@@ -17,21 +17,19 @@ export type WeekProps = CalendarProps;
 const Week = (props: WeekProps) => {
   const {theme, current, firstDay, hideExtraDays, markedDates, onDayPress, onDayLongPress, style: propsStyle, numberOfDays = 1, timelineLeftInset} = props;
   const style = useRef(styleConstructor(theme));
-
-  const getWeek = (date?: string) => {
+  const dayProps = extractDayProps(props);
+  const currXdate = parseDate(current);
+  const getWeek = useCallback((date?: string) => {
     if (date) {
       return getWeekDates(date, firstDay);
     }
-  };
+  }, [firstDay]);
 
   // renderWeekNumber (weekNumber) {
   //   return <BasicDay key={`week-${weekNumber}`} theme={this.props.theme} marking={{disableTouchEvent: true}} state='disabled'>{weekNumber}</BasicDay>;
   // }
 
   const renderDay = (day: XDate, id: number) => {
-    const dayProps = extractDayProps(props);
-    const currXdate = parseDate(current);
-    
     // hide extra days
     if (current && hideExtraDays) {
       if (!sameMonth(day, currXdate)) {
@@ -55,23 +53,16 @@ const Week = (props: WeekProps) => {
 
   const renderWeek = () => {
     const dates = numberOfDays > 1 ? getPartialWeekDates(current, numberOfDays) : getWeek(current);
-    let week: any[] = [];
-  
+    const week: JSX.Element[] = [];
+    const todayIndex = dates?.indexOf(parseDate(new Date())) || -1;
+
     if (dates) {
-      dates.forEach((day: XDate, id: number) => {
+      const datesToRender = numberOfDays > 1 && todayIndex > -1 ? dates.slice(todayIndex, numberOfDays) : dates;
+      datesToRender.forEach((day: XDate, id: number) => {
         week.push(renderDay(day, id));
       }, this);
     }
-  
-    // if (this.props.showWeekNumbers) {
-    //   week.unshift(this.renderWeekNumber(item[item.length - 1].getWeek()));
-    // }
-    
-    const todayIndex = dates?.indexOf(parseDate(new Date())) || -1;
 
-    if (numberOfDays > 1 && todayIndex > -1) {
-      week = week.slice(todayIndex, numberOfDays);
-    }
     return week;
   };
 

src/infinite-list/index.tsx

@@ -44,7 +44,7 @@ const InfiniteList = (props: InfiniteListProps, ref: any) => {
     scrollViewProps,
     positionIndex = 0
   } = props;
-  
+
   const dataProvider = useMemo(() => {
     return dataProviderMaker(data);
   }, [data]);
@@ -78,7 +78,7 @@ const InfiniteList = (props: InfiniteListProps, ref: any) => {
   const onScroll = useCallback(
     (event, offsetX, offsetY) => {
       reloadPagesDebounce?.cancel();
-      
+
       const {x, y} = event.nativeEvent.contentOffset;
       const newPageIndex = Math.round(isHorizontal ? x / pageWidth : y / pageHeight);
 
@@ -106,7 +106,7 @@ const InfiniteList = (props: InfiniteListProps, ref: any) => {
             onMomentumScrollEnd(event);
           }, 100);
         }
-        
+
         pageIndex.current = newPageIndex;
       }
 
@@ -125,7 +125,7 @@ const InfiniteList = (props: InfiniteListProps, ref: any) => {
           reloadPagesDebounce?.(pageIndex.current);
           onReachNearEdge?.(pageIndex.current!);
         }
-  
+
         scrollViewProps?.onMomentumScrollEnd?.(event);
       }
     },
@@ -136,6 +136,16 @@ const InfiniteList = (props: InfiniteListProps, ref: any) => {
     scrolledByUser.current = true;
   }, []);
 
+  const scrollViewPropsMemo = useMemo(() => {
+    return {
+      pagingEnabled: isHorizontal,
+      bounces: false,
+      ...scrollViewProps,
+      onScrollBeginDrag,
+      onMomentumScrollEnd
+    };
+  }, [onScrollBeginDrag, onMomentumScrollEnd, scrollViewProps, isHorizontal]);
+
   const style = useMemo(() => {
     return {height: pageHeight};
   }, [pageHeight]);
@@ -153,13 +163,7 @@ const InfiniteList = (props: InfiniteListProps, ref: any) => {
       renderAheadOffset={5 * pageWidth}
       onScroll={onScroll}
       style={style}
-      scrollViewProps={{
-        pagingEnabled: isHorizontal,
-        bounces: false,
-        ...scrollViewProps,
-        onScrollBeginDrag,
-        onMomentumScrollEnd
-      }}
+      scrollViewProps={scrollViewPropsMemo}
     />
   );
 };