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(); }; +