Improve performance agenda list (#2004)

* reduce load time on change day from around 1000 ms to 230 ms

* reduce load time on change day from around 1000 ms to 230 ms

* reduce load time on change day from around 1000 ms to 330 ms

* fix PR comments

Author: yuvalsho

example/src/mocks/AgendaItem.tsx

@@ -41,7 +41,7 @@ const AgendaItem = (props: ItemProps) => {
   );
 };
 
-export default AgendaItem;
+export default React.memo(AgendaItem);
 
 
 const styles = StyleSheet.create({

src/expandableCalendar/agendaList.tsx

@@ -5,10 +5,12 @@ import map from 'lodash/map';
 import isFunction from 'lodash/isFunction';
 import isUndefined from 'lodash/isUndefined';
 import debounce from 'lodash/debounce';
+import isEqual from 'lodash/isEqual';
+
 
 import XDate from 'xdate';
 
-import React, {useCallback, useContext, useEffect, useRef} from 'react';
+import React, {useCallback, useContext, useEffect, useMemo, useRef} from 'react';
 import {
   Text,
   SectionList,
@@ -19,7 +21,8 @@ import {
   NativeSyntheticEvent,
   NativeScrollEvent,
   LayoutChangeEvent,
-  ViewToken
+  ViewToken,
+  TextProps
 } from 'react-native';
 
 import {isToday, isGTE, sameDate} from '../dateutils';
@@ -67,23 +70,23 @@ export interface AgendaListProps extends SectionListProps<any, DefaultSectionT>
  */
 const AgendaList = (props: AgendaListProps) => {
   const {
-    theme, 
-    sections, 
-    scrollToNextEvent, 
-    viewOffset = 0, 
-    avoidDateUpdates, 
-    onScroll, 
-    onMomentumScrollBegin, 
+    theme,
+    sections,
+    scrollToNextEvent,
+    viewOffset = 0,
+    avoidDateUpdates,
+    onScroll,
+    onMomentumScrollBegin,
     onMomentumScrollEnd,
     onScrollToIndexFailed,
     renderSectionHeader,
     sectionStyle,
     keyExtractor,
-    dayFormatter, 
-    dayFormat = 'dddd, MMM d', 
-    useMoment, 
+    dayFormatter,
+    dayFormat = 'dddd, MMM d',
+    useMoment,
     markToday = true,
-    onViewableItemsChanged
+    onViewableItemsChanged,
   } = props;
   const {date, updateSource, setDate, setDisabled} = useContext(Context);
   const style = useRef(styleConstructor(theme));
@@ -135,7 +138,7 @@ const AgendaList = (props: AgendaListProps) => {
     return i;
   };
 
-  const getSectionTitle = (title: string) => {
+  const getSectionTitle = useCallback((title: string) => {
     if (!title) return;
 
     let sectionTitle = title;
@@ -158,7 +161,7 @@ const AgendaList = (props: AgendaListProps) => {
     }
 
     return sectionTitle;
-  };
+  }, []);
 
   const scrollToSection = useCallback(debounce((d) => {
     const sectionIndex = scrollToNextEvent ? getNextSectionIndex(d) : getSectionIndex(d);
@@ -212,6 +215,8 @@ const AgendaList = (props: AgendaListProps) => {
     onMomentumScrollEnd?.(event);
   }, [onMomentumScrollEnd, setDisabled]);
 
+  const headerTextStyle = useMemo(() => [style.current.sectionText, sectionStyle], [sectionStyle]);
+
   const _onScrollToIndexFailed = useCallback((info: {index: number; highestMeasuredFrameIndex: number; averageItemLength: number}) => {
     if (onScrollToIndexFailed) {
       onScrollToIndexFailed(info);
@@ -231,12 +236,9 @@ const AgendaList = (props: AgendaListProps) => {
       return renderSectionHeader(title);
     }
 
-    return (
-      <Text allowFontScaling={false} style={[style.current.sectionText, sectionStyle]} onLayout={onHeaderLayout}>
-        {getSectionTitle(title)}
-      </Text>
-    );
-  }, []);
+    const headerTitle = getSectionTitle(title);
+    return <AgendaSectionHeader title={headerTitle} style={headerTextStyle} onLayout={onHeaderLayout}/>;
+  }, [headerTextStyle]);
 
   const _keyExtractor = useCallback((item: any, index: number) => {
     return isFunction(keyExtractor) ? keyExtractor(item, index) : String(index);
@@ -264,6 +266,24 @@ const AgendaList = (props: AgendaListProps) => {
   // }
 };
 
+interface AgendaSectionHeaderProps {
+  title?: string;
+  onLayout: TextProps['onLayout'];
+  style: TextProps['style'];
+}
+
+function areTextPropsEqual(prev: AgendaSectionHeaderProps, next: AgendaSectionHeaderProps): boolean {
+  return isEqual(prev.style, next.style) && prev.title === next.title;
+}
+
+const AgendaSectionHeader = React.memo((props: AgendaSectionHeaderProps) => {
+  return (
+    <Text allowFontScaling={false} style={props.style} onLayout={props.onLayout}>
+      {props.title}
+    </Text>
+  );
+}, areTextPropsEqual);
+
 export default AgendaList;
 
 AgendaList.displayName = 'AgendaList';