chore(performance): memoize calendar and reuse ISO date ids in day rendering (#2850)

* CalendarDay: Introduce isoDate/dateMonthId

Signed-off-by: gpbl <io@gpbl.dev>

* Memoize calendar values

Signed-off-by: gpbl <io@gpbl.dev>

* Lint file

Signed-off-by: gpbl <io@gpbl.dev>

* Use day.displayMonthId

Signed-off-by: gpbl <io@gpbl.dev>

---------

Signed-off-by: gpbl <io@gpbl.dev>

Author: gpbl

src/DayPicker.tsx

@@ -699,19 +699,17 @@ export function DayPicker(initialProps: DayPickerProps) {
                             return (
                               // biome-ignore lint/a11y/useSemanticElements: react component
                               <components.Day
-                                key={`${dateLib.format(date, "yyyy-MM-dd")}_${dateLib.format(day.displayMonth, "yyyy-MM")}`}
+                                key={`${day.isoDate}_${day.displayMonthId}`}
                                 day={day}
                                 modifiers={modifiers}
                                 className={className.join(" ")}
                                 style={style}
                                 role="gridcell"
                                 aria-selected={modifiers.selected || undefined}
                                 aria-label={ariaLabel}
-                                data-day={dateLib.format(date, "yyyy-MM-dd")}
+                                data-day={day.isoDate}
                                 data-month={
-                                  day.outside
-                                    ? dateLib.format(date, "yyyy-MM")
-                                    : undefined
+                                  day.outside ? day.dateMonthId : undefined
                                 }
                                 data-selected={modifiers.selected || undefined}
                                 data-disabled={modifiers.disabled || undefined}

src/classes/CalendarDay.ts

@@ -19,6 +19,9 @@ export class CalendarDay {
       displayMonth && !dateLib.isSameMonth(date, displayMonth),
     );
     this.dateLib = dateLib;
+    this.isoDate = dateLib.format(date, "yyyy-MM-dd");
+    this.displayMonthId = dateLib.format(displayMonth, "yyyy-MM");
+    this.dateMonthId = dateLib.format(date, "yyyy-MM");
   }
 
   /**
@@ -48,6 +51,27 @@ export class CalendarDay {
   /** The date represented by this day. */
   readonly date: Date;
 
+  /**
+   * Stable `yyyy-MM-dd` representation for reuse in keys/data attrs.
+   *
+   * @since V9.11.2
+   */
+  readonly isoDate: string;
+
+  /**
+   * Stable `yyyy-MM` representation of the displayed month.
+   *
+   * @since V9.11.2
+   */
+  readonly displayMonthId: string;
+
+  /**
+   * Stable `yyyy-MM` representation of the date's actual month.
+   *
+   * @since V9.11.2
+   */
+  readonly dateMonthId: string;
+
   /**
    * Checks if this day is equal to another `CalendarDay`, considering both the
    * date and the displayed month.

src/useCalendar.ts

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useMemo } from "react";
 
 import type {
   CalendarDay,
@@ -84,6 +84,8 @@ export function useCalendar(
     | "fixedWeeks"
     | "ISOWeek"
     | "numberOfMonths"
+    | "pagedNavigation"
+    | "reverseMonths"
     | "disableNavigation"
     | "onMonthChange"
     | "month"
@@ -115,27 +117,70 @@ export function useCalendar(
   }, [props.timeZone]);
 
   /** The months displayed in the calendar. */
-  const displayMonths = getDisplayMonths(firstMonth, navEnd, props, dateLib);
-
-  /** The dates displayed in the calendar. */
-  const dates = getDates(
-    displayMonths,
-    props.endMonth ? endOfMonth(props.endMonth) : undefined,
-    props,
+  // biome-ignore lint/correctness/useExhaustiveDependencies: We want to recompute only when specific props change.
+  const { months, weeks, days, previousMonth, nextMonth } = useMemo(() => {
+    const displayMonths = getDisplayMonths(
+      firstMonth,
+      navEnd,
+      { numberOfMonths: props.numberOfMonths },
+      dateLib,
+    );
+
+    const dates = getDates(
+      displayMonths,
+      props.endMonth ? endOfMonth(props.endMonth) : undefined,
+      {
+        ISOWeek: props.ISOWeek,
+        fixedWeeks: props.fixedWeeks,
+        broadcastCalendar: props.broadcastCalendar,
+      },
+      dateLib,
+    );
+
+    const months = getMonths(
+      displayMonths,
+      dates,
+      {
+        broadcastCalendar: props.broadcastCalendar,
+        fixedWeeks: props.fixedWeeks,
+        ISOWeek: props.ISOWeek,
+        reverseMonths: props.reverseMonths,
+      },
+      dateLib,
+    );
+
+    const weeks = getWeeks(months);
+    const days = getDays(months);
+
+    const previousMonth = getPreviousMonth(
+      firstMonth,
+      navStart,
+      props,
+      dateLib,
+    );
+    const nextMonth = getNextMonth(firstMonth, navEnd, props, dateLib);
+
+    return {
+      months,
+      weeks,
+      days,
+      previousMonth,
+      nextMonth,
+    };
+  }, [
     dateLib,
-  );
-
-  /** The Months displayed in the calendar. */
-  const months = getMonths(displayMonths, dates, props, dateLib);
-
-  /** The Weeks displayed in the calendar. */
-  const weeks = getWeeks(months);
-
-  /** The Days displayed in the calendar. */
-  const days = getDays(months);
-
-  const previousMonth = getPreviousMonth(firstMonth, navStart, props, dateLib);
-  const nextMonth = getNextMonth(firstMonth, navEnd, props, dateLib);
+    firstMonth.getTime(),
+    navEnd?.getTime(),
+    navStart?.getTime(),
+    props.disableNavigation,
+    props.broadcastCalendar,
+    props.endMonth?.getTime(),
+    props.fixedWeeks,
+    props.ISOWeek,
+    props.numberOfMonths,
+    props.pagedNavigation,
+    props.reverseMonths,
+  ]);
 
   const { disableNavigation, onMonthChange } = props;