From 9b5da1bca32bd0085704d49b978c1fbec9983bd3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Ricardo?= <andrermr.dev@gmail.com>
Date: Tue, 4 Jan 2022 06:06:05 -0400
Subject: [PATCH] :zap: performance increase for the DatePicker component
 (#1404)

Co-authored-by: Bailey Pumfleet <pumfleet@hey.com>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>
---
 components/booking/DatePicker.tsx | 25 ++++++++++++++++---------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/components/booking/DatePicker.tsx b/components/booking/DatePicker.tsx
index 3f3691cba8..cc42b4e68a 100644
--- a/components/booking/DatePicker.tsx
+++ b/components/booking/DatePicker.tsx
@@ -86,12 +86,24 @@ function DatePicker({
   const { i18n } = useLocale();
   const [browsingDate, setBrowsingDate] = useState<Dayjs | null>(date);
 
+  const [month, setMonth] = useState<string>("");
+  const [year, setYear] = useState<string>("");
+  const [isFirstMonth, setIsFirstMonth] = useState<boolean>(false);
+
   useEffect(() => {
     if (!browsingDate || (date && browsingDate.utcOffset() !== date?.utcOffset())) {
       setBrowsingDate(date || dayjs().tz(timeZone()));
     }
   }, [date, browsingDate]);
 
+  useEffect(() => {
+    if (browsingDate) {
+      setMonth(browsingDate.toDate().toLocaleString(i18n.language, { month: "long" }));
+      setYear(browsingDate.format("YYYY"));
+      setIsFirstMonth(browsingDate.startOf("month").isBefore(dayjs()));
+    }
+  }, [browsingDate, i18n.language]);
+
   const days = useMemo(() => {
     if (!browsingDate) {
       return [];
@@ -156,19 +168,14 @@ function DatePicker({
       }>
       <div className="flex mb-4 text-xl font-light text-gray-600">
         <span className="w-1/2 text-gray-600 dark:text-white">
-          <strong className="text-gray-900 dark:text-white">
-            {browsingDate.toDate().toLocaleString(i18n.language, { month: "long" })}
-          </strong>{" "}
-          <span className="text-gray-500">{browsingDate.format("YYYY")}</span>
+          <strong className="text-gray-900 dark:text-white">{month}</strong>{" "}
+          <span className="text-gray-500">{year}</span>
         </span>
         <div className="w-1/2 text-right text-gray-600 dark:text-gray-400">
           <button
             onClick={decrementMonth}
-            className={classNames(
-              "group mr-2 p-1",
-              browsingDate.startOf("month").isBefore(dayjs()) && "text-gray-400 dark:text-gray-600"
-            )}
-            disabled={browsingDate.startOf("month").isBefore(dayjs())}
+            className={classNames("group mr-2 p-1", isFirstMonth && "text-gray-400 dark:text-gray-600")}
+            disabled={isFirstMonth}
             data-testid="decrementMonth">
             <ChevronLeftIcon className="w-5 h-5 group-hover:text-black dark:group-hover:text-white" />
           </button>