diff --git a/src/components/task-list/task-list-table.tsx b/src/components/task-list/task-list-table.tsx
index c2203e3..48ba0c8 100644
--- 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 (
- {t.start.toLocaleDateString(locale, dateTimeOptions)}
+ {toLocaleDateString(t.start, dateTimeOptions)}
-
- {t.end.toLocaleDateString(locale, dateTimeOptions)}
+ {toLocaleDateString(t.end, dateTimeOptions)}
);
@@ -96,3 +108,4 @@ export const TaskListTableDefault: React.FC<{
);
};
+
diff --git a/src/helpers/date-helper.ts b/src/helpers/date-helper.ts
index 400b47d..a966242 100644
--- 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();
};
+