From 03311f6c6c65b9274fb2ef75e7577b67fceb081b Mon Sep 17 00:00:00 2001
From: Josh Hunt <joshhunt@users.noreply.github.com>
Date: Fri, 12 Jul 2024 10:38:47 +0100
Subject: [PATCH] =?UTF-8?q?I18n:=20Memoize=20formatDate/formatDuration=20m?=
 =?UTF-8?q?ethods=20because=20they're=20prett=E2=80=A6=20(#90338)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

I18n: Memoize formatDate/formatDuration methods because they're pretty slow!!
---
 package.json                                  |  1 +
 public/app/core/internationalization/dates.ts | 42 +++++++++++++------
 yarn.lock                                     |  1 +
 3 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index cd095aaf87d..dceab2f9fcb 100644
--- a/package.json
+++ b/package.json
@@ -334,6 +334,7 @@
     "lucene": "^2.1.1",
     "marked": "12.0.2",
     "memoize-one": "6.0.0",
+    "micro-memoize": "^4.1.2",
     "ml-regression-polynomial": "^3.0.0",
     "ml-regression-simple-linear": "^3.0.0",
     "moment": "2.30.1",
diff --git a/public/app/core/internationalization/dates.ts b/public/app/core/internationalization/dates.ts
index 429db533901..8f0aaa14d7c 100644
--- a/public/app/core/internationalization/dates.ts
+++ b/public/app/core/internationalization/dates.ts
@@ -1,20 +1,36 @@
 import '@formatjs/intl-durationformat/polyfill';
+import deepEqual from 'fast-deep-equal';
+import memoize from 'micro-memoize';
 
 import { getI18next } from './index';
 
-export function formatDate(value: number | Date | string, format: Intl.DateTimeFormatOptions = {}): string {
-  if (typeof value === 'string') {
-    return formatDate(new Date(value), format);
+const deepMemoize: typeof memoize = (fn) => memoize(fn, { isEqual: deepEqual });
+
+const createDateTimeFormatter = deepMemoize((language: string, options: Intl.DateTimeFormatOptions) => {
+  return new Intl.DateTimeFormat(language, options);
+});
+
+const createDurationFormatter = deepMemoize((language: string, options: Intl.DurationFormatOptions) => {
+  return new Intl.DurationFormat(language, options);
+});
+
+export const formatDate = deepMemoize(
+  (value: number | Date | string, format: Intl.DateTimeFormatOptions = {}): string => {
+    if (typeof value === 'string') {
+      return formatDate(new Date(value), format);
+    }
+
+    const i18n = getI18next();
+    const dateFormatter = createDateTimeFormatter(i18n.language, format);
+    return dateFormatter.format(value);
   }
+);
 
-  const i18n = getI18next();
-  const dateFormatter = new Intl.DateTimeFormat(i18n.language, format);
-  return dateFormatter.format(value);
-}
+export const formatDuration = deepMemoize(
+  (duration: Intl.DurationInput, options: Intl.DurationFormatOptions = {}): string => {
+    const i18n = getI18next();
 
-export function formatDuration(duration: Intl.DurationInput, options: Intl.DurationFormatOptions = {}) {
-  const i18n = getI18next();
-
-  const dateFormatter = new Intl.DurationFormat(i18n.language, options);
-  return dateFormatter.format(duration);
-}
+    const dateFormatter = createDurationFormatter(i18n.language, options);
+    return dateFormatter.format(duration);
+  }
+);
diff --git a/yarn.lock b/yarn.lock
index 12620190626..180c3ed8d55 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -17344,6 +17344,7 @@ __metadata:
     lucene: "npm:^2.1.1"
     marked: "npm:12.0.2"
     memoize-one: "npm:6.0.0"
+    micro-memoize: "npm:^4.1.2"
     mini-css-extract-plugin: "npm:2.9.0"
     ml-regression-polynomial: "npm:^3.0.0"
     ml-regression-simple-linear: "npm:^3.0.0"