Cache date formatters

fixup cache

Author: wojtekmaj

src/DateTimeInput.jsx

@@ -22,7 +22,7 @@ import AmPm from 'react-time-picker/dist/TimeInput/AmPm';
 import Divider from './Divider';
 import NativeInput from './DateTimeInput/NativeInput';
 
-import { getFormatter, formatDate } from './shared/dateFormatter';
+import { getFormatter, getNumberFormatter, formatDate } from './shared/dateFormatter';
 import {
   convert12to24,
   convert24to12,
@@ -152,6 +152,8 @@ function renderCustomInputs(placeholder, elementFunctions, allowMultipleInstance
     }, []);
 }
 
+const formatNumber = getNumberFormatter({ useGrouping: false });
+
 export default class DateTimeInput extends PureComponent {
   static getDerivedStateFromProps(nextProps, prevState) {
     const { minDate, maxDate } = nextProps;
@@ -249,9 +251,7 @@ export default class DateTimeInput extends PureComponent {
 
   // eslint-disable-next-line class-methods-use-this
   get formatNumber() {
-    const options = { useGrouping: false };
-
-    return getFormatter(options);
+    return formatNumber;
   }
 
   get dateDivider() {

src/shared/dateFormatter.js

@@ -1,7 +1,49 @@
 import getUserLocale from 'get-user-locale';
 
+const formatterCache = new Map();
+
 export function getFormatter(options) {
-  return (locale, date) => date.toLocaleString(locale || getUserLocale(), options);
+  return (locale, date) => {
+    const localeWithDefault = locale || getUserLocale();
+
+    if (!formatterCache.has(localeWithDefault)) {
+      formatterCache.set(localeWithDefault, new Map());
+    }
+
+    const formatterCacheLocale = formatterCache.get(localeWithDefault);
+
+    if (!formatterCacheLocale.has(options)) {
+      formatterCacheLocale.set(
+        options,
+        new Intl.DateTimeFormat(localeWithDefault, options).format,
+      );
+    }
+
+    return formatterCacheLocale.get(options)(date);
+  };
+}
+
+const numberFormatterCache = new Map();
+
+export function getNumberFormatter(options) {
+  return (locale, date) => {
+    const localeWithDefault = locale || getUserLocale();
+
+    if (!numberFormatterCache.has(localeWithDefault)) {
+      numberFormatterCache.set(localeWithDefault, new Map());
+    }
+
+    const numberFormatterCacheLocale = numberFormatterCache.get(localeWithDefault);
+
+    if (!numberFormatterCacheLocale.has(options)) {
+      numberFormatterCacheLocale.set(
+        options,
+        new Intl.NumberFormat(localeWithDefault, options).format,
+      );
+    }
+
+    return numberFormatterCacheLocale.get(options)(date);
+  };
 }
 
 const formatDateOptions = { day: 'numeric', month: 'numeric', year: 'numeric' };