Add day component props for memo equality control

docsRNC/docs/Components/Calendar.md

@@ -180,6 +180,16 @@ Replace default title with custom element
 Replace default day with custom day rendering component  
 <span style={{color: 'grey'}}>JSX.Element</span>
 
+### dayComponentMemoEqualityFn
+
+Optional `memo` equality function provides fine control over Day component's memoization. Refer to [React.memo Docs](https://react.dev/reference/react/memo) for guidance on equality functions.
+<span style={{color: 'grey'}}>(prevProps: DayProps, nextProps: DayProps) => boolean</span>
+
+### extraData
+
+Custom data object to be passed as a prop to the Day component. May be used for memo equality check or passing additional data to your custom Day component via props. Consider memoizing unless being used along with custom equality function for a check.
+<span style={{color: 'grey'}}>Record<string, unknown></span>
+
 ### disableAllTouchEventsForDisabledDays
 
 Whether to disable all touch events for disabled days (can be override with 'disableTouchEvent' in 'markedDates')  

src/calendar/day/index.tsx

@@ -12,6 +12,10 @@ import BasicDay, {BasicDayProps} from './basic';
 import PeriodDay from './period';
 
 function areEqual(prevProps: DayProps, nextProps: DayProps) {
+  // if we have a user provided equality function then we run that instead
+  if (typeof nextProps.dayComponentMemoEqualityFn === 'function') {
+    return nextProps.dayComponentMemoEqualityFn(prevProps, nextProps);
+  }
   const prevPropsWithoutMarkDates = omit(prevProps, 'marking');
   const nextPropsWithoutMarkDates = omit(nextProps, 'marking');
   const didPropsChange = some(prevPropsWithoutMarkDates, function (value, key) {
@@ -24,6 +28,15 @@ function areEqual(prevProps: DayProps, nextProps: DayProps) {
 export interface DayProps extends BasicDayProps {
   /** Provide custom day rendering component */
   dayComponent?: React.ComponentType<DayProps & {date?: DateData}>; // TODO: change 'date' prop type to string by removing it from overriding BasicDay's 'date' prop (breaking change for V2)
+  /**
+   * Provide your own custom equality function for memoizing the day component
+   */
+  dayComponentMemoEqualityFn?: (prevProps: DayProps, nextProps: DayProps) => boolean;
+  /**
+   * Custom data object to be passed as a prop to the Day component.
+   * May be used for memo equality check or additional data to your custom Day component
+   */
+  extraData?: Record<string, unknown>;
 }
 
 const Day = React.memo((props: DayProps) => {

src/componentUpdater.ts

@@ -71,7 +71,9 @@ export function extractDayProps(props: CalendarProps) {
     disableAllTouchEventsForDisabledDays,
     disableAllTouchEventsForInactiveDays,
     dayComponent,
-    testID
+    testID,
+    dayComponentMemoEqualityFn,
+    extraData,
   } = props;
 
   const dayProps = {
@@ -85,7 +87,9 @@ export function extractDayProps(props: CalendarProps) {
     disableAllTouchEventsForDisabledDays,
     disableAllTouchEventsForInactiveDays,
     dayComponent,
-    testID
+    testID,
+    dayComponentMemoEqualityFn,
+    extraData,
   };
 
   return dayProps;