Extract shared Intl.Collator into CollatorUtils

src/components/LocaleContextProvider.tsx

@@ -1,6 +1,7 @@
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import useOnyx from '@hooks/useOnyx';
 
+import getCollator from '@libs/CollatorUtils';
 import DateUtils from '@libs/DateUtils';
 import {fromLocaleDigit as fromLocaleDigitLocaleDigitUtils, toLocaleDigit as toLocaleDigitLocaleDigitUtils, toLocaleOrdinal as toLocaleOrdinalLocaleDigitUtils} from '@libs/LocaleDigitUtils';
 import {formatPhoneNumberWithCountryCode} from '@libs/LocalePhoneNumber';
@@ -94,8 +95,6 @@ const LocaleContext = createContext<LocaleContextProps>({
     dateFnsLocale: undefined,
 });
 
-const COLLATOR_OPTIONS: Intl.CollatorOptions = {usage: 'sort', sensitivity: 'variant', numeric: true, caseFirst: 'upper'};
-
 function LocaleContextProvider({children}: LocaleContextProviderProps) {
     const currentUserPersonalDetails = useCurrentUserPersonalDetails();
     const [areTranslationsLoading = true] = useOnyx(ONYXKEYS.RAM_ONLY_ARE_TRANSLATIONS_LOADING);
@@ -140,7 +139,7 @@ function LocaleContextProvider({children}: LocaleContextProviderProps) {
 
     const selectedTimezone = currentUserPersonalDetails?.timezone?.selected;
     const effectiveTimezone = selectedTimezone ?? CONST.DEFAULT_TIME_ZONE.selected;
-    const collator = new Intl.Collator(currentLocale, COLLATOR_OPTIONS);
+    const collator = getCollator(currentLocale);
 
     const translate: LocaleContextProps['translate'] = (path, ...parameters) => translateLocalize(currentLocale, path, ...parameters);
 

src/libs/CollatorUtils.ts

@@ -0,0 +1,25 @@
+import type Locale from '@src/types/onyx/Locale';
+
+/**
+ * Options shared by every collator in the app so that sorting stays consistent everywhere.
+ */
+const COLLATOR_OPTIONS: Intl.CollatorOptions = {usage: 'sort', sensitivity: 'variant', numeric: true, caseFirst: 'upper'};
+
+const collators = new Map<string, Intl.Collator>();
+
+/**
+ * Returns a cached collator for the given locale. Collators are cached because constructing an Intl.Collator
+ * loads locale data, which is far too expensive to repeat per comparison inside a sort.
+ */
+function getCollator(locale: Locale | undefined): Intl.Collator {
+    const key = locale ?? '';
+    const cachedCollator = collators.get(key);
+    if (cachedCollator) {
+        return cachedCollator;
+    }
+    const collator = new Intl.Collator(locale, COLLATOR_OPTIONS);
+    collators.set(key, collator);
+    return collator;
+}
+
+export default getCollator;

src/libs/ReportNameUtils.ts

@@ -29,6 +29,7 @@ import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
 import {Str} from 'expensify-common';
 
 import {getAddAgentRuleMessage, getDeleteAgentRuleMessage, getUpdateAgentRuleMessage} from './AgentRuleChangeLogUtils';
+import getCollator from './CollatorUtils';
 import {formatPhoneNumber as formatPhoneNumberPhoneUtils} from './LocalePhoneNumber';
 import {translateLocal} from './Localize';
 // eslint-disable-next-line import/no-cycle
@@ -270,7 +271,7 @@ const buildReportNameFromParticipantNames = ({
  * The reason for this is that the computation of default group name should not depend on the locale.
  * This is used to ensure that group name stays consistent across locales.
  */
-const customCollator = new Intl.Collator('en', {usage: 'sort', sensitivity: 'variant', numeric: true, caseFirst: 'upper'});
+const customCollator = getCollator(CONST.LOCALES.EN);
 
 /**
  * Returns the report name if the report is a group chat

src/libs/SearchQueryUtils.ts

@@ -60,6 +60,7 @@ import {getStandardExportTemplateDisplayName} from './AccountingUtils';
 import {getBankAccountSearchLabel, isBankAccountPartiallySetup} from './BankAccountUtils';
 import {getCardFeedsForDisplay} from './CardFeedUtils';
 import {getCardDescription} from './CardUtils';
+import getCollator from './CollatorUtils';
 import {convertToBackendAmount, convertToFrontendAmountAsInteger} from './CurrencyUtils';
 import DateUtils from './DateUtils';
 import Log from './Log';
@@ -553,7 +554,7 @@ function getUpdatedFilterValue(filterName: SyntaxFilterKey, filterValue: string
  * The reason for this is that the computation of hashes should not depend on the locale.
  * This is used to ensure that hashes stay consistent.
  */
-const customCollator = new Intl.Collator('en', {usage: 'sort', sensitivity: 'variant', numeric: true, caseFirst: 'upper'});
+const customCollator = getCollator(CONST.LOCALES.EN);
 
 let defaultSearchQueryJSON: SearchQueryJSON | undefined;