fix(react-calendar-compat, Calendar): Calendar should memoize default…

… value since it's a new Date() to avoid rerenders (microsoft#29747)

* fix: Calendar should memoize default value since it's a new Date() to avoid rerenders.

* change files

* Update change/@fluentui-react-f74bc323-4380-4898-a854-205fb9b839f3.json

* Update change/@fluentui-react-calendar-compat-b50cbe44-44ed-4b3a-9329-aa9be78d1e75.json

change/@fluentui-react-calendar-compat-b50cbe44-44ed-4b3a-9329-aa9be78d1e75.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix(Calendar): Calendar should memoize today's default value since it causes rerenders by creating a new object each time.",
+  "packageName": "@fluentui/react-calendar-compat",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-f74bc323-4380-4898-a854-205fb9b839f3.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix(Calendar): Calendar should memoize today's default value since it causes rerenders by creating a new object each time.",
+  "packageName": "@fluentui/react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-calendar-compat/src/components/Calendar/Calendar.tsx

@@ -29,7 +29,16 @@ const defaultWorkWeekDays: DayOfWeek[] = [
   DayOfWeek.Friday,
 ];
 
-function useDateState({ value, today = new Date(), onSelectDate }: CalendarProps) {
+function useDateState(props: CalendarProps) {
+  const { value, today: todayProp, onSelectDate } = props;
+
+  const today = React.useMemo(() => {
+    if (todayProp === undefined) {
+      return new Date();
+    }
+    return todayProp;
+  }, [todayProp]);
+
   /** The currently selected date in the calendar */
   const [selectedDate, setSelectedDate] = useControllableState({
     defaultState: today,

packages/react/src/components/Calendar/Calendar.base.tsx

@@ -59,7 +59,16 @@ const DEFAULT_PROPS: Partial<ICalendarProps> = {
   allFocusable: false,
 };
 
-function useDateState({ value, today = new Date(), onSelectDate }: ICalendarProps) {
+function useDateState(props: ICalendarProps) {
+  const { value, today: todayProp, onSelectDate } = props;
+
+  const today = React.useMemo(() => {
+    if (todayProp === undefined) {
+      return new Date();
+    }
+    return todayProp;
+  }, [todayProp]);
+
   /** The currently selected date in the calendar */
   const [selectedDate = today, setSelectedDate] = useControllableValue(value, today);