Merge pull request #19 from moonship-fe/main

fix: optimization getLocaleDate performances
MaTeMaTuK · Aug 15, 2021 · fd5f4ed · fd5f4ed
2 parents 78d9e33 + 894ab6b
commit fd5f4ed
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 5 deletions.
diff --git a/src/components/task-list/task-list-table.tsx b/src/components/task-list/task-list-table.tsx
@@ -1,7 +1,18 @@
-import React from "react";
+import React, { useMemo } from "react";
 import styles from "./task-list-table.module.css";
 import { Task } from "../../types/public-types";
 
+const localeDateStringCache = {};
+const toLocaleDateStringFactory = (locale: string) => (date: Date, dateTimeOptions: Intl.DateTimeFormatOptions) => {
+  const key = date.toString();
+  let lds = localeDateStringCache[key];
+  if (!lds) {
+    lds = date.toLocaleDateString(locale, dateTimeOptions);
+    localeDateStringCache[key] = lds;
+  }
+  return lds;
+};
+
 export const TaskListTableDefault: React.FC<{
   rowHeight: number;
   rowWidth: string;
@@ -27,6 +38,8 @@ export const TaskListTableDefault: React.FC<{
     month: "long",
     day: "numeric",
   };
+  const toLocaleDateString = useMemo(() => toLocaleDateStringFactory(locale), [locale]);
+
   return (
     <div
       className={styles.taskListWrapper}
@@ -78,7 +91,7 @@ export const TaskListTableDefault: React.FC<{
                 maxWidth: rowWidth,
               }}
             >
-              &nbsp;{t.start.toLocaleDateString(locale, dateTimeOptions)}
+              &nbsp;{toLocaleDateString(t.start, dateTimeOptions)}
             </div>
             <div
               className={styles.taskListCell}
@@ -87,12 +100,12 @@ export const TaskListTableDefault: React.FC<{
                 maxWidth: rowWidth,
               }}
             >
-              &nbsp;
-              {t.end.toLocaleDateString(locale, dateTimeOptions)}
+              &nbsp;{toLocaleDateString(t.end, dateTimeOptions)}
             </div>
           </div>
         );
       })}
     </div>
   );
 };
+
diff --git a/src/helpers/date-helper.ts b/src/helpers/date-helper.ts
@@ -1,4 +1,6 @@
 import { Task, ViewMode } from "../types/public-types";
+import DateTimeFormatOptions = Intl.DateTimeFormatOptions;
+import DateTimeFormat = Intl.DateTimeFormat;
 
 type DateHelperScales =
   | "year"
@@ -9,6 +11,18 @@ type DateHelperScales =
   | "second"
   | "millisecond";
 
+const intlDTCache = {};
+const getCachedDateTimeFormat = (locString: string | string[], opts: DateTimeFormatOptions = {}): DateTimeFormat => {
+  const key = JSON.stringify([locString, opts]);
+  let dtf = intlDTCache[key];
+  if (!dtf) {
+    dtf = new Intl.DateTimeFormat(locString, opts);
+    intlDTCache[key] = dtf;
+  }
+  return dtf;
+};
+
+
 export const addToDate = (
   date: Date,
   quantity: number,
@@ -130,7 +144,7 @@ export const seedDates = (
 };
 
 export const getLocaleMonth = (date: Date, locale: string) => {
-  let bottomValue = new Intl.DateTimeFormat(locale, {
+  let bottomValue = getCachedDateTimeFormat(locale, {
     month: "long",
   }).format(date);
   bottomValue = bottomValue.replace(
@@ -173,3 +187,4 @@ export const getWeekNumberISO8601 = (date: Date) => {
 export const getDaysInMonth = (month: number, year: number) => {
   return new Date(year, month + 1, 0).getDate();
 };
+