ExpandableCalendar - fix double render on load

Author: Inbal-Tish

example/src/screens/expandableCalendarScreen.tsx

@@ -63,7 +63,6 @@ const ExpandableCalendarScreen = (props: Props) => {
           markedDates={marked.current}
           leftArrowImageSource={leftArrowIcon}
           rightArrowImageSource={rightArrowIcon}
-          onMonthChange={onMonthChange}
           // animateScroll
           // closeOnDayPress={false}
         />

src/calendar-list/index.tsx

@@ -101,13 +101,13 @@ const CalendarList = (props: CalendarListProps, ref: any) => {
   const headerProps = extractHeaderProps(props);
   const calendarSize = horizontal ? calendarWidth : calendarHeight;
 
+  const [currentMonth, setCurrentMonth] = useState(parseDate(current));
+
   const style = useRef(styleConstructor(theme));
   const list = useRef();
   const range = useRef(horizontal ? 1 : 3);
   const initialDate = useRef(parseDate(current));
-  const visibleMonth = useRef();
-
-  const [currentMonth, setCurrentMonth] = useState(parseDate(current));
+  const visibleMonth = useRef(currentMonth);
 
   const items = useMemo(() => {
     const months = [];

src/calendar/index.tsx

@@ -14,6 +14,7 @@ import {extractHeaderProps, extractDayProps} from '../componentUpdater';
 // @ts-expect-error
 import {WEEK_NUMBER} from '../testIDs';
 import {DateData, Theme} from '../types';
+import {useDidUpdate} from '../hooks';
 import styleConstructor from './style';
 import CalendarHeader, {CalendarHeaderProps} from './header';
 import Day, {DayProps} from './day/index';
@@ -105,7 +106,6 @@ const Calendar = (props: CalendarProps) => {
   const [currentMonth, setCurrentMonth] = useState(current || initialDate ? parseDate(current || initialDate) : new XDate());
   const style = useRef(styleConstructor(theme));
   const header = useRef();
-  const isMounted = useRef(false);
   const weekNumberMarking = useRef({disabled: true, disableTouchEvent: true});
 
   useEffect(() => {
@@ -114,15 +114,10 @@ const Calendar = (props: CalendarProps) => {
     }
   }, [initialDate]);
 
-  useEffect(() => {
-    if (isMounted.current) {
-      // Avoid callbacks call on mount
-      const _currentMonth = currentMonth.clone();
-      onMonthChange?.(xdateToData(_currentMonth));
-      onVisibleMonthsChange?.([xdateToData(_currentMonth)]);
-    } else {
-      isMounted.current = true;
-    }
+  useDidUpdate(() => {
+    const _currentMonth = currentMonth.clone();
+    onMonthChange?.(xdateToData(_currentMonth));
+    onVisibleMonthsChange?.([xdateToData(_currentMonth)]);
   }, [currentMonth]);
 
   const updateMonth = useCallback((newMonth: XDate) => {

src/expandableCalendar/Context/Provider.tsx

@@ -5,6 +5,7 @@ import {Animated, TouchableOpacity, View, ViewStyle, ViewProps, StyleProp} from
 
 import {sameMonth} from '../../dateutils';
 import {xdateToData} from '../../interface';
+import {useDidUpdate} from '../../hooks';
 import {Theme, DateData} from '../../types';
 import {UpdateSources} from '../commons';
 import styleConstructor from '../style';
@@ -79,7 +80,7 @@ const CalendarProvider = (props: CalendarContextProviderProps) => {
     return [style.current.contextWrapper, propsStyle];
   }, [style, propsStyle]);
 
-  useEffect(() => {
+  useDidUpdate(() => {
     if (date) {
       _setDate(date, UpdateSources.PROP_UPDATE);
     }