Ensures Calendar.List always show the right active date ranges (#14)

.changeset/silent-balloons-sniff.md

@@ -0,0 +1,5 @@
+---
+"@marceloterreiro/flash-calendar": patch
+---
+
+Fix `<Calendar.List />` losing track of the active date ranges when the list is scrolled past certain amount

apps/example/src/components/GithubIssues/CalendarListGithubIssues.stories.tsx

@@ -0,0 +1,35 @@
+import { Calendar } from "@marceloterreiro/flash-calendar";
+import type { Meta } from "@storybook/react";
+
+const CalendarMeta: Meta<typeof Calendar> = {
+  title: "Calendar.List/Github Issues",
+  decorators: [],
+};
+
+export default CalendarMeta;
+
+// See more: https://github.com/MarceloPrado/flash-calendar/issues/11
+export const Issue11 = () => {
+  const act = [
+    { endId: "2024-01-31", startId: "2024-01-30" },
+    { endId: "2024-01-12", startId: "2024-01-10" },
+    { endId: "2024-03-07", startId: "2024-02-28" },
+    { endId: "2024-04-10", startId: "2024-04-01" },
+    { endId: "2024-01-19", startId: "2024-01-18" },
+    { endId: "2024-02-06", startId: "2024-02-02" },
+    { endId: "2024-01-26", startId: "2024-01-25" },
+    { endId: "2024-01-05", startId: "2024-01-02" },
+  ];
+  const dis = ["2024-02-02", "2024-02-06", "2024-02-19", "2024-02-27"];
+
+  return (
+    <Calendar.List
+      calendarActiveDateRanges={act}
+      calendarDisabledDateIds={dis}
+      calendarFormatLocale="de-DE"
+      onCalendarDayPress={(day) => {
+        console.log("pressed");
+      }}
+    />
+  );
+};

apps/example/src/components/PerfTestCalendar/PerfTestCalendar.tsx

@@ -94,15 +94,27 @@ const BasePerfTestCalendar = memo(
 BasePerfTestCalendar.displayName = "BasePerfTestCalendar";
 
 export const PerfTestCalendar = memo(
-  ({ calendarActiveDateRanges, ...props }: CalendarProps) => {
+  ({ calendarActiveDateRanges, calendarMonthId, ...props }: CalendarProps) => {
     useEffect(() => {
       activeDateRangesEmitter.emit(
         "onSetActiveDateRanges",
         calendarActiveDateRanges ?? []
       );
-    }, [calendarActiveDateRanges]);
+      /**
+       * While `calendarMonthId` is not used by the effect, we still need it in
+       * the dependency array since [FlashList uses recycling
+       * internally](https://shopify.github.io/flash-list/docs/recycling).
+       *
+       * This means `Calendar` can re-render with different props instead of
+       * getting re-mounted. Without it, we would see staled/invalid data, as
+       * reported by
+       * [#11](https://github.com/MarceloPrado/flash-calendar/issues/11).
+       */
+    }, [calendarActiveDateRanges, calendarMonthId]);
 
-    return <BasePerfTestCalendar {...props} />;
+    return (
+      <BasePerfTestCalendar {...props} calendarMonthId={calendarMonthId} />
+    );
   }
 );
 PerfTestCalendar.displayName = "PerfTestCalendar";

packages/flash-calendar/src/components/Calendar.tsx

@@ -150,15 +150,25 @@ const BaseCalendar = memo(
 BaseCalendar.displayName = "BaseCalendar";
 
 export const Calendar = memo(
-  ({ calendarActiveDateRanges, ...props }: CalendarProps) => {
+  ({ calendarActiveDateRanges, calendarMonthId, ...props }: CalendarProps) => {
     useEffect(() => {
       activeDateRangesEmitter.emit(
         "onSetActiveDateRanges",
         calendarActiveDateRanges ?? []
       );
-    }, [calendarActiveDateRanges]);
+      /**
+       * While `calendarMonthId` is not used by the effect, we still need it in
+       * the dependency array since [FlashList uses recycling
+       * internally](https://shopify.github.io/flash-list/docs/recycling).
+       *
+       * This means `Calendar` can re-render with different props instead of
+       * getting re-mounted. Without it, we would see staled/invalid data, as
+       * reported by
+       * [#11](https://github.com/MarceloPrado/flash-calendar/issues/11).
+       */
+    }, [calendarActiveDateRanges, calendarMonthId]);
 
-    return <BaseCalendar {...props} />;
+    return <BaseCalendar {...props} calendarMonthId={calendarMonthId} />;
   }
 );