General purpose memoization tool

.eslintrc.js

@@ -66,6 +66,15 @@ const restrictedImportPaths = [
             "For 'ExpensiMark', please use '@libs/Parser' instead.",
         ].join('\n'),
     },
+    {
+        name: 'lodash/memoize',
+        message: "Please use '@src/libs/memoize' instead.",
+    },
+    {
+        name: 'lodash',
+        importNames: ['memoize'],
+        message: "Please use '@src/libs/memoize' instead.",
+    },
 ];
 
 const restrictedImportPatterns = [

src/components/ProfilingToolMenu/BaseProfilingToolMenu.tsx

@@ -14,6 +14,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import toggleProfileTool from '@libs/actions/ProfilingTool';
 import getPlatform from '@libs/getPlatform';
 import Log from '@libs/Log';
+import {Memoize} from '@libs/memoize';
 import CONFIG from '@src/CONFIG';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -53,6 +54,7 @@ function BaseProfilingToolMenu({isProfilingInProgress = false, pathToBeUsed, dis
     const [sharePath, setSharePath] = useState('');
     const [totalMemory, setTotalMemory] = useState(0);
     const [usedMemory, setUsedMemory] = useState(0);
+    const [memoizeStats, setMemoizeStats] = useState<ReturnType<typeof Memoize.stopMonitoring>>();
     const {translate} = useLocalize();
 
     // eslint-disable-next-line @lwc/lwc/no-async-await
@@ -64,11 +66,13 @@ function BaseProfilingToolMenu({isProfilingInProgress = false, pathToBeUsed, dis
         const amountOfUsedMemory = await DeviceInfo.getUsedMemory();
         setTotalMemory(amountOfTotalMemory);
         setUsedMemory(amountOfUsedMemory);
+        setMemoizeStats(Memoize.stopMonitoring());
     }, []);
 
     const onToggleProfiling = useCallback(() => {
         const shouldProfiling = !isProfilingInProgress;
         if (shouldProfiling) {
+            Memoize.startMonitoring();
             startProfiling();
         } else {
             stop();
@@ -87,8 +91,9 @@ function BaseProfilingToolMenu({isProfilingInProgress = false, pathToBeUsed, dis
                 platform: getPlatform(),
                 totalMemory: formatBytes(totalMemory, 2),
                 usedMemory: formatBytes(usedMemory, 2),
+                memoizeStats,
             }),
-        [totalMemory, usedMemory],
+        [memoizeStats, totalMemory, usedMemory],
     );
 
     useEffect(() => {

src/libs/EmojiUtils.ts

@@ -1,6 +1,5 @@
 import {getUnixTime} from 'date-fns';
 import {Str} from 'expensify-common';
-import memoize from 'lodash/memoize';
 import Onyx from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
 import * as Emojis from '@assets/emojis';
@@ -12,6 +11,7 @@ import type {ReportActionReaction, UsersReactions} from '@src/types/onyx/ReportA
 import type IconAsset from '@src/types/utils/IconAsset';
 import type EmojiTrie from './EmojiTrie';
 import type {SupportedLanguage} from './EmojiTrie';
+import memoize from './memoize';
 
 type HeaderIndice = {code: string; index: number; icon: IconAsset};
 type EmojiSpacer = {code: string; spacer: boolean};
@@ -74,42 +74,45 @@ const getLocalizedEmojiName = (name: string, lang: OnyxEntry<Locale>): string =>
 /**
  * Get the unicode code of an emoji in base 16.
  */
-const getEmojiUnicode = memoize((input: string) => {
-    if (input.length === 0) {
-        return '';
-    }
+const getEmojiUnicode = memoize(
+    (input: string) => {
+        if (input.length === 0) {
+            return '';
+        }
 
-    if (input.length === 1) {
-        return input
-            .charCodeAt(0)
-            .toString()
-            .split(' ')
-            .map((val) => parseInt(val, 10).toString(16))
-            .join(' ');
-    }
+        if (input.length === 1) {
+            return input
+                .charCodeAt(0)
+                .toString()
+                .split(' ')
+                .map((val) => parseInt(val, 10).toString(16))
+                .join(' ');
+        }
 
-    const pairs = [];
-
-    // Some Emojis in UTF-16 are stored as a pair of 2 Unicode characters (e.g. Flags)
-    // The first char is generally between the range U+D800 to U+DBFF called High surrogate
-    // & the second char between the range U+DC00 to U+DFFF called low surrogate
-    // More info in the following links:
-    // 1. https://docs.microsoft.com/en-us/windows/win32/intl/surrogates-and-supplementary-characters
-    // 2. https://thekevinscott.com/emojis-in-javascript/
-    for (let i = 0; i < input.length; i++) {
-        if (input.charCodeAt(i) >= 0xd800 && input.charCodeAt(i) <= 0xdbff) {
-            // high surrogate
-            if (input.charCodeAt(i + 1) >= 0xdc00 && input.charCodeAt(i + 1) <= 0xdfff) {
-                // low surrogate
-                pairs.push((input.charCodeAt(i) - 0xd800) * 0x400 + (input.charCodeAt(i + 1) - 0xdc00) + 0x10000);
+        const pairs = [];
+
+        // Some Emojis in UTF-16 are stored as a pair of 2 Unicode characters (e.g. Flags)
+        // The first char is generally between the range U+D800 to U+DBFF called High surrogate
+        // & the second char between the range U+DC00 to U+DFFF called low surrogate
+        // More info in the following links:
+        // 1. https://docs.microsoft.com/en-us/windows/win32/intl/surrogates-and-supplementary-characters
+        // 2. https://thekevinscott.com/emojis-in-javascript/
+        for (let i = 0; i < input.length; i++) {
+            if (input.charCodeAt(i) >= 0xd800 && input.charCodeAt(i) <= 0xdbff) {
+                // high surrogate
+                if (input.charCodeAt(i + 1) >= 0xdc00 && input.charCodeAt(i + 1) <= 0xdfff) {
+                    // low surrogate
+                    pairs.push((input.charCodeAt(i) - 0xd800) * 0x400 + (input.charCodeAt(i + 1) - 0xdc00) + 0x10000);
+                }
+            } else if (input.charCodeAt(i) < 0xd800 || input.charCodeAt(i) > 0xdfff) {
+                // modifiers and joiners
+                pairs.push(input.charCodeAt(i));
             }
-        } else if (input.charCodeAt(i) < 0xd800 || input.charCodeAt(i) > 0xdfff) {
-            // modifiers and joiners
-            pairs.push(input.charCodeAt(i));
         }
-    }
-    return pairs.map((val) => parseInt(String(val), 10).toString(16)).join(' ');
-});
+        return pairs.map((val) => parseInt(String(val), 10).toString(16)).join(' ');
+    },
+    {monitoringName: 'getEmojiUnicode'},
+);
 
 /**
  * Function to remove Skin Tone and utf16 surrogates from Emoji

src/libs/LocaleDigitUtils.ts

@@ -1,8 +1,8 @@
-import _ from 'lodash';
 import type {ValueOf} from 'type-fest';
 import type CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
 import * as Localize from './Localize';
+import memoize from './memoize';
 import * as NumberFormatUtils from './NumberFormatUtils';
 
 type Locale = ValueOf<typeof CONST.LOCALES>;
@@ -13,28 +13,31 @@ const INDEX_DECIMAL = 10;
 const INDEX_MINUS_SIGN = 11;
 const INDEX_GROUP = 12;
 
-const getLocaleDigits = _.memoize((locale: Locale): string[] => {
-    const localeDigits = [...STANDARD_DIGITS];
-    for (let i = 0; i <= 9; i++) {
-        localeDigits[i] = NumberFormatUtils.format(locale, i);
-    }
-    NumberFormatUtils.formatToParts(locale, 1000000.5).forEach((part) => {
-        switch (part.type) {
-            case 'decimal':
-                localeDigits[INDEX_DECIMAL] = part.value;
-                break;
-            case 'minusSign':
-                localeDigits[INDEX_MINUS_SIGN] = part.value;
-                break;
-            case 'group':
-                localeDigits[INDEX_GROUP] = part.value;
-                break;
-            default:
-                break;
+const getLocaleDigits = memoize(
+    (locale: Locale): string[] => {
+        const localeDigits = [...STANDARD_DIGITS];
+        for (let i = 0; i <= 9; i++) {
+            localeDigits[i] = NumberFormatUtils.format(locale, i);
         }
-    });
-    return localeDigits;
-});
+        NumberFormatUtils.formatToParts(locale, 1000000.5).forEach((part) => {
+            switch (part.type) {
+                case 'decimal':
+                    localeDigits[INDEX_DECIMAL] = part.value;
+                    break;
+                case 'minusSign':
+                    localeDigits[INDEX_MINUS_SIGN] = part.value;
+                    break;
+                case 'group':
+                    localeDigits[INDEX_GROUP] = part.value;
+                    break;
+                default:
+                    break;
+            }
+        });
+        return localeDigits;
+    },
+    {monitoringName: 'getLocaleDigits'},
+);
 
 /**
  * Gets the locale digit corresponding to a standard digit.

src/libs/NumberFormatUtils.ts

@@ -1,12 +1,18 @@
 import type {ValueOf} from 'type-fest';
 import type CONST from '@src/CONST';
+import intlPolyfill from './IntlPolyfill';
+import memoize from './memoize';
+
+intlPolyfill();
+
+const MemoizedNumberFormat = memoize(Intl.NumberFormat, {maxSize: 10});
 
 function format(locale: ValueOf<typeof CONST.LOCALES>, number: number, options?: Intl.NumberFormatOptions): string {
-    return new Intl.NumberFormat(locale, options).format(number);
+    return new MemoizedNumberFormat(locale, options).format(number);
 }
 
 function formatToParts(locale: ValueOf<typeof CONST.LOCALES>, number: number, options?: Intl.NumberFormatOptions): Intl.NumberFormatPart[] {
-    return new Intl.NumberFormat(locale, options).formatToParts(number);
+    return new MemoizedNumberFormat(locale, options).formatToParts(number);
 }
 
 export {format, formatToParts};

src/libs/UnreadIndicatorUpdater/index.ts

@@ -1,6 +1,6 @@
 import debounce from 'lodash/debounce';
-import memoize from 'lodash/memoize';
 import type {OnyxCollection} from 'react-native-onyx';
+import memoize from '@libs/memoize';
 import * as ReportConnection from '@libs/ReportConnection';
 import * as ReportUtils from '@libs/ReportUtils';
 import Navigation, {navigationRef} from '@navigation/Navigation';
@@ -34,7 +34,7 @@ function getUnreadReportsForUnreadIndicator(reports: OnyxCollection<Report>, cur
     );
 }
 
-const memoizedGetUnreadReportsForUnreadIndicator = memoize(getUnreadReportsForUnreadIndicator);
+const memoizedGetUnreadReportsForUnreadIndicator = memoize(getUnreadReportsForUnreadIndicator, {maxArgs: 1});
 
 const triggerUnreadUpdate = debounce(() => {
     const currentReportID = navigationRef?.isReady?.() ? Navigation.getTopmostReportId() ?? '-1' : '-1';

src/libs/memoize/cache/arrayCacheBuilder.ts

@@ -0,0 +1,84 @@
+import type {Cache, CacheOpts} from '@libs/memoize/types';
+
+/**
+ * Builder of the cache using `Array` primitive under the hood. It is an LRU cache, where the most recently accessed elements are at the end of the array, and the least recently accessed elements are at the front.
+ * @param opts - Cache options, check `CacheOpts` type for more details.
+ * @returns
+ */
+function buildArrayCache<K extends unknown[], V>(opts: CacheOpts): Cache<K, V> {
+    const cache: Array<[K, V]> = [];
+
+    const {maxSize, keyComparator} = opts;
+
+    function getKeyIndex(key: K) {
+        // We search the array backwards because the most recently added entries are at the end, and our heuristic follows the principles of an LRU cache - that the most recently added entries are most likely to be used again.
+        for (let i = cache.length - 1; i >= 0; i--) {
+            if (keyComparator(cache[i][0], key)) {
+                return i;
+            }
+        }
+        return -1;
+    }
+
+    return {
+        get(key) {
+            const index = getKeyIndex(key);
+
+            if (index === -1) {
+                return;
+            }
+
+            const [entry] = cache.splice(index, 1);
+            cache.push(entry);
+            return {value: entry[1]};
+        },
+        set(key, value) {
+            const index = getKeyIndex(key);
+
+            if (index !== -1) {
+                cache.splice(index, 1);
+            }
+
+            cache.push([key, value]);
+
+            if (cache.length > maxSize) {
+                cache.shift();
+            }
+        },
+        getSet(key: K, valueProducer: () => V) {
+            const index = getKeyIndex(key);
+
+            if (index !== -1) {
+                const [entry] = cache.splice(index, 1);
+                cache.push(entry);
+                return {value: entry[1]};
+            }
+
+            const value = valueProducer();
+
+            cache.push([key, value]);
+
+            if (cache.length > maxSize) {
+                cache.shift();
+            }
+
+            return {value};
+        },
+        snapshot: {
+            keys() {
+                return cache.map((entry) => entry[0]);
+            },
+            values() {
+                return cache.map((entry) => entry[1]);
+            },
+            entries() {
+                return [...cache];
+            },
+        },
+        get size() {
+            return cache.length;
+        },
+    };
+}
+
+export default buildArrayCache;

src/libs/memoize/const.ts

@@ -0,0 +1,10 @@
+import type {Options} from './types';
+
+const DEFAULT_OPTIONS = {
+    maxSize: Infinity,
+    equality: 'deep',
+    monitor: false,
+    cache: 'array',
+} satisfies Options;
+
+export default DEFAULT_OPTIONS;