Perf: Lru cache

lib/Onyx.js

@@ -102,19 +102,6 @@ function isCollectionKey(key) {
     return _.contains(_.values(onyxKeys.COLLECTION), key);
 }
 
-/**
- * Find the collection a collection item belongs to
- * or return null if them item is not a part of a collection
- * @param {string} key
- * @returns {string|null}
- */
-function getCollectionKeyForItem(key) {
-    return _.chain(onyxKeys.COLLECTION)
-        .values()
-        .find(name => key.startsWith(name))
-        .value();
-}
-
 /**
  * Checks to see if a given key matches with the
  * configured key of our connected subscriber
@@ -412,48 +399,6 @@ function connect(mapping) {
     return connectionID;
 }
 
-/**
- * Remove cache items that are no longer connected through Onyx
- * @param {string} key
- */
-function cleanCache(key) {
-    // Don't remove default keys from cache, they don't take much memory and are accessed frequently
-    if (_.has(defaultKeyStates, key)) {
-        return;
-    }
-
-    const hasRemainingConnections = _.some(callbackToStateMapping, {key});
-
-    // When the key is still used in other places don't remove it from cache
-    if (hasRemainingConnections) {
-        return;
-    }
-
-    // When this is a collection - also recursively remove any unused individual items
-    if (isCollectionKey(key)) {
-        cache.drop(key);
-
-        getAllKeys().then(cachedKeys => _.chain(cachedKeys)
-            .filter(name => name.startsWith(key))
-            .forEach(cleanCache));
-
-        return;
-    }
-
-    // When this is a collection item - check if the collection is still used
-    const collectionKey = getCollectionKeyForItem(key);
-    if (collectionKey) {
-        // When there's an active subscription for a collection don't remove the item
-        const hasRemainingConnectionsForCollection = _.some(callbackToStateMapping, {key: collectionKey});
-        if (hasRemainingConnectionsForCollection) {
-            return;
-        }
-    }
-
-    // Otherwise remove the value from cache
-    cache.drop(key);
-}
-
 /**
  * Remove the listener for a react component
  *
@@ -471,11 +416,7 @@ function disconnect(connectionID, keyToRemoveFromEvictionBlocklist) {
         removeFromEvictionBlockList(keyToRemoveFromEvictionBlocklist, connectionID);
     }
 
-    const key = callbackToStateMapping[connectionID].key;
     delete callbackToStateMapping[connectionID];
-
-    // When the last subscriber disconnects, drop cache as well
-    cleanCache(key);
 }
 
 /**
@@ -742,13 +683,16 @@ function mergeCollection(collectionKey, collection) {
  * @param {function} registerStorageEventListener a callback when a storage event happens.
  * This applies to web platforms where the local storage emits storage events
  * across all open tabs and allows Onyx to stay in sync across all open tabs.
+ * @param {Number} [options.maxCachedKeysCount=55] Sets how many recent keys should we try to keep in cache
+ * Setting this to 0 would keep cache forever
  * @param {Boolean} [options.captureMetrics]
  */
 function init({
     keys,
     initialKeyStates,
     safeEvictionKeys,
     registerStorageEventListener,
+    maxCachedKeysCount = 55,
     captureMetrics = false,
 }) {
     if (captureMetrics) {
@@ -757,6 +701,13 @@ function init({
         applyDecorators();
     }
 
+    if (maxCachedKeysCount > 0) {
+        setInterval(() => {
+            // Try to free anything dated from cache
+            cache.removeLeastRecentUsedKeys(maxCachedKeysCount);
+        }, 10 * 1000);
+    }
+
     // Let Onyx know about all of our keys
     onyxKeys = keys;
 

lib/OnyxCache.js

@@ -17,6 +17,13 @@ class OnyxCache {
          */
         this.storageKeys = new Set();
 
+        /**
+         * @private
+         * Unique list of keys maintained in access order (most recent at the end)
+         * @type {Set<string>}
+         */
+        this.recentKeys = new Set();
+
         /**
          * @private
          * A map of cached values
@@ -53,6 +60,7 @@ class OnyxCache {
      * @returns {*}
      */
     getValue(key) {
+        this.addToAccessedKeys(key);
         return this.storageMap[key];
     }
 
@@ -83,6 +91,7 @@ class OnyxCache {
      */
     set(key, value) {
         this.addKey(key);
+        this.addToAccessedKeys(key);
         this.storageMap[key] = value;
 
         return value;
@@ -106,6 +115,7 @@ class OnyxCache {
         const storageKeys = this.getAllKeys();
         const mergedKeys = _.keys(data);
         this.storageKeys = new Set([...storageKeys, ...mergedKeys]);
+        _.each(mergedKeys, key => this.addToAccessedKeys(key));
     }
 
     /**
@@ -144,6 +154,32 @@ class OnyxCache {
 
         return this.pendingPromises[taskName];
     }
+
+    /**
+     * @private
+     * Adds a key to the top of the recently accessed keys
+     * @param {string} key
+     */
+    addToAccessedKeys(key) {
+        // Removing and re-adding a key ensures it's at the end of the list
+        this.recentKeys.delete(key);
+        this.recentKeys.add(key);
+    }
+
+    /**
+     * Remove keys that don't fall into the range of recently used keys
+     * @param {number} recentKeysSize - a list of most recent keys from this size will remain in cache.
+     */
+    removeLeastRecentUsedKeys(recentKeysSize) {
+        if (this.recentKeys.size > recentKeysSize) {
+            // Get the last N keys by doing a negative slice
+            const recentlyAccessed = [...this.recentKeys].slice(-recentKeysSize);
+            const storageKeys = _.keys(this.storageMap);
+            const keysToRemove = _.difference(storageKeys, recentlyAccessed);
+
+            _.each(keysToRemove, this.drop);
+        }
+    }
 }
 
 const instance = new OnyxCache();

lib/decorateWithMetrics.js

@@ -24,8 +24,6 @@ function decorateWithMetrics(func, alias = func.name) {
         throw new Error(`"${alias}" is already decorated`);
     }
 
-    stats[alias] = [];
-
     function decorated(...args) {
         const startTime = performance.now() - PERFORMANCE_OFFSET;
 
@@ -48,6 +46,7 @@ function decorateWithMetrics(func, alias = func.name) {
                     methodName: alias,
                     startTime,
                     endTime,
+                    duration: endTime - startTime,
                     args,
                 });
             });
@@ -78,8 +77,7 @@ function sum(list, prop) {
  */
 function getMetrics() {
     const summaries = _.chain(stats)
-        .map((data, methodName) => {
-            const calls = _.map(data, call => ({...call, duration: call.endTime - call.startTime}));
+        .map((calls, methodName) => {
             const total = sum(calls, 'duration');
             const avg = (total / calls.length) || 0;
             const max = _.max(calls, 'duration').duration || 0;
@@ -144,21 +142,22 @@ function toDuration(millis, raw = false) {
  * @param {'console'|'csv'|'json'|'string'} [options.format=console] The output format of this function
  * `string` is useful when __DEV__ is set to `false` as writing to the console is disabled, but the result of this
  * method would still get printed as output
+ * @param {string[]} [options.methods] Print stats only for these method names
  * @returns {string|undefined}
  */
-function printMetrics({raw = false, format = 'console'} = {}) {
+function printMetrics({raw = false, format = 'console', methods} = {}) {
     const {totalTime, summaries, lastCompleteCall} = getMetrics();
 
     const tableSummary = MDTable.factory({
         heading: ['method', 'total time spent', 'max', 'min', 'avg', 'time last call completed', 'calls made'],
         leftAlignedCols: [0],
     });
 
-    const methodCallTables = _.chain(summaries)
-        .filter(method => method.avg > 0)
-        .sortBy('avg')
-        .reverse()
-        .map(({methodName, calls, ...methodStats}) => {
+    const methodNames = _.isArray(methods) ? methods : _.keys(summaries);
+
+    const methodCallTables = _.chain(methodNames)
+        .map((methodName) => {
+            const {calls, ...methodStats} = summaries[methodName];
             tableSummary.addRow(
                 methodName,
                 toDuration(methodStats.total, raw),