react-native-onyx 1.0.86 → 1.0.88

package/dist/web.development.js

@@ -1,13 +1,13 @@
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
-		module.exports = factory(require("fast-equals"), require("underscore"), require("idb-keyval"), require("lodash/transform"), require("react-dom"), require("react"));
+		module.exports = factory(require("fast-equals"), require("underscore"), require("react-dom"), require("idb-keyval"), require("lodash/transform"), require("react"));
 	else if(typeof define === 'function' && define.amd)
-		define(["fast-equals", "underscore", "idb-keyval", "lodash/transform", "react-dom", "react"], factory);
+		define(["fast-equals", "underscore", "react-dom", "idb-keyval", "lodash/transform", "react"], factory);
 	else if(typeof exports === 'object')
-		exports["react-native-onyx/web"] = factory(require("fast-equals"), require("underscore"), require("idb-keyval"), require("lodash/transform"), require("react-dom"), require("react"));
+		exports["react-native-onyx/web"] = factory(require("fast-equals"), require("underscore"), require("react-dom"), require("idb-keyval"), require("lodash/transform"), require("react"));
 	else
-		root["react-native-onyx/web"] = factory(root["fast-equals"], root["underscore"], root["idb-keyval"], root["lodash/transform"], root["react-dom"], root["react"]);
-})(self, (__WEBPACK_EXTERNAL_MODULE_fast_equals__, __WEBPACK_EXTERNAL_MODULE_underscore__, __WEBPACK_EXTERNAL_MODULE_idb_keyval__, __WEBPACK_EXTERNAL_MODULE_lodash_transform__, __WEBPACK_EXTERNAL_MODULE_react_dom__, __WEBPACK_EXTERNAL_MODULE_react__) => {
+		root["react-native-onyx/web"] = factory(root["fast-equals"], root["underscore"], root["react-dom"], root["idb-keyval"], root["lodash/transform"], root["react"]);
+})(self, (__WEBPACK_EXTERNAL_MODULE_fast_equals__, __WEBPACK_EXTERNAL_MODULE_underscore__, __WEBPACK_EXTERNAL_MODULE_react_dom__, __WEBPACK_EXTERNAL_MODULE_idb_keyval__, __WEBPACK_EXTERNAL_MODULE_lodash_transform__, __WEBPACK_EXTERNAL_MODULE_react__) => {
 return /******/ (() => { // webpackBootstrap
 /******/ 	var __webpack_modules__ = ({
 
@@ -73,14 +73,14 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var fast_equals__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(fast_equals__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var underscore__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! underscore */ "underscore");
 /* harmony import */ var underscore__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(underscore__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _Logger__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./Logger */ "./lib/Logger.js");
-/* harmony import */ var _OnyxCache__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./OnyxCache */ "./lib/OnyxCache.js");
-/* harmony import */ var _Str__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./Str */ "./lib/Str.js");
+/* harmony import */ var _Logger__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./Logger */ "./lib/Logger.js");
+/* harmony import */ var _OnyxCache__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./OnyxCache */ "./lib/OnyxCache.js");
+/* harmony import */ var _Str__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./Str */ "./lib/Str.js");
 /* harmony import */ var _createDeferredTask__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./createDeferredTask */ "./lib/createDeferredTask.js");
-/* harmony import */ var _metrics_PerformanceUtils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./metrics/PerformanceUtils */ "./lib/metrics/PerformanceUtils.js");
-/* harmony import */ var _storage__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./storage */ "./lib/storage/index.web.js");
-/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./utils */ "./lib/utils.js");
-/* harmony import */ var _batch__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./batch */ "./lib/batch.js");
+/* harmony import */ var _metrics_PerformanceUtils__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./metrics/PerformanceUtils */ "./lib/metrics/PerformanceUtils.js");
+/* harmony import */ var _storage__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./storage */ "./lib/storage/index.web.js");
+/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./utils */ "./lib/utils.js");
+/* harmony import */ var _batch__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./batch */ "./lib/batch.js");
 /* eslint-disable no-continue */
 
 
@@ -132,6 +132,47 @@ let defaultKeyStates = {};
 // Connections can be made before `Onyx.init`. They would wait for this task before resolving
 const deferredInitTask = (0,_createDeferredTask__WEBPACK_IMPORTED_MODULE_2__["default"])();
 
+let batchUpdatesPromise = null;
+let batchUpdatesQueue = [];
+
+/**
+ * We are batching together onyx updates. This helps with use cases where we schedule onyx updates after each other.
+ * This happens for example in the Onyx.update function, where we process API responses that might contain a lot of
+ * update operations. Instead of calling the subscribers for each update operation, we batch them together which will
+ * cause react to schedule the updates at once instead of after each other. This is mainly a performance optimization.
+ * @returns {Promise}
+ */
+function maybeFlushBatchUpdates() {
+  if (batchUpdatesPromise) {
+    return batchUpdatesPromise;
+  }
+
+  batchUpdatesPromise = new Promise((resolve) => {
+    /* We use (setTimeout, 0) here which should be called once native module calls are flushed (usually at the end of the frame)
+     * We may investigate if (setTimeout, 1) (which in React Native is equal to requestAnimationFrame) works even better
+     * then the batch will be flushed on next frame.
+     */
+    setTimeout(() => {
+      const updatesCopy = batchUpdatesQueue;
+      batchUpdatesQueue = [];
+      batchUpdatesPromise = null;
+      (0,_batch__WEBPACK_IMPORTED_MODULE_3__["default"])(() => {
+        updatesCopy.forEach((applyUpdates) => {
+          applyUpdates();
+        });
+      });
+
+      resolve();
+    }, 0);
+  });
+  return batchUpdatesPromise;
+}
+
+function batchUpdates(updates) {
+  batchUpdatesQueue.push(updates);
+  return maybeFlushBatchUpdates();
+}
+
 /**
  * Uses a selector function to return a simplified version of sourceData
  * @param {Mixed} sourceData
@@ -166,26 +207,26 @@ const reduceCollectionWithSelector = (collection, selector, withOnyxInstanceStat
  */
 function get(key) {
   // When we already have the value in cache - resolve right away
-  if (_OnyxCache__WEBPACK_IMPORTED_MODULE_3__["default"].hasCacheForKey(key)) {
-    return Promise.resolve(_OnyxCache__WEBPACK_IMPORTED_MODULE_3__["default"].getValue(key));
+  if (_OnyxCache__WEBPACK_IMPORTED_MODULE_4__["default"].hasCacheForKey(key)) {
+    return Promise.resolve(_OnyxCache__WEBPACK_IMPORTED_MODULE_4__["default"].getValue(key));
   }
 
   const taskName = `get:${key}`;
 
   // When a value retrieving task for this key is still running hook to it
-  if (_OnyxCache__WEBPACK_IMPORTED_MODULE_3__["default"].hasPendingTask(taskName)) {
-    return _OnyxCache__WEBPACK_IMPORTED_MODULE_3__["default"].getTaskPromise(taskName);
+  if (_OnyxCache__WEBPACK_IMPORTED_MODULE_4__["default"].hasPendingTask(taskName)) {
+    return _OnyxCache__WEBPACK_IMPORTED_MODULE_4__["default"].getTaskPromise(taskName);
   }
 
   // Otherwise retrieve the value from storage and capture a promise to aid concurrent usages
-  const promise = _storage__WEBPACK_IMPORTED_MODULE_4__["default"].getItem(key).
+  const promise = _storage__WEBPACK_IMPORTED_MODULE_5__["default"].getItem(key).
   then((val) => {
-    _OnyxCache__WEBPACK_IMPORTED_MODULE_3__["default"].set(key, val);
+    _OnyxCache__WEBPACK_IMPORTED_MODULE_4__["default"].set(key, val);
     return val;
   }).
-  catch((err) => _Logger__WEBPACK_IMPORTED_MODULE_5__.logInfo(`Unable to get item from persistent storage. Key: ${key} Error: ${err}`));
+  catch((err) => _Logger__WEBPACK_IMPORTED_MODULE_6__.logInfo(`Unable to get item from persistent storage. Key: ${key} Error: ${err}`));
 
-  return _OnyxCache__WEBPACK_IMPORTED_MODULE_3__["default"].captureTask(taskName, promise);
+  return _OnyxCache__WEBPACK_IMPORTED_MODULE_4__["default"].captureTask(taskName, promise);
 }
 
 /**
@@ -195,7 +236,7 @@ function get(key) {
  */
 function getAllKeys() {
   // When we've already read stored keys, resolve right away
-  const storedKeys = _OnyxCache__WEBPACK_IMPORTED_MODULE_3__["default"].getAllKeys();
+  const storedKeys = _OnyxCache__WEBPACK_IMPORTED_MODULE_4__["default"].getAllKeys();
   if (storedKeys.length > 0) {
     return Promise.resolve(storedKeys);
   }
@@ -203,18 +244,18 @@ function getAllKeys() {
   const taskName = 'getAllKeys';
 
   // When a value retrieving task for all keys is still running hook to it
-  if (_OnyxCache__WEBPACK_IMPORTED_MODULE_3__["default"].hasPendingTask(taskName)) {
-    return _OnyxCache__WEBPACK_IMPORTED_MODULE_3__["default"].getTaskPromise(taskName);
+  if (_OnyxCache__WEBPACK_IMPORTED_MODULE_4__["default"].hasPendingTask(taskName)) {
+    return _OnyxCache__WEBPACK_IMPORTED_MODULE_4__["default"].getTaskPromise(taskName);
   }
 
   // Otherwise retrieve the keys from storage and capture a promise to aid concurrent usages
-  const promise = _storage__WEBPACK_IMPORTED_MODULE_4__["default"].getAllKeys().
+  const promise = _storage__WEBPACK_IMPORTED_MODULE_5__["default"].getAllKeys().
   then((keys) => {
-    underscore__WEBPACK_IMPORTED_MODULE_1___default().each(keys, (key) => _OnyxCache__WEBPACK_IMPORTED_MODULE_3__["default"].addKey(key));
+    underscore__WEBPACK_IMPORTED_MODULE_1___default().each(keys, (key) => _OnyxCache__WEBPACK_IMPORTED_MODULE_4__["default"].addKey(key));
     return keys;
   });
 
-  return _OnyxCache__WEBPACK_IMPORTED_MODULE_3__["default"].captureTask(taskName, promise);
+  return _OnyxCache__WEBPACK_IMPORTED_MODULE_4__["default"].captureTask(taskName, promise);
 }
 
 /**
@@ -235,7 +276,7 @@ function isCollectionKey(key) {
  * @returns {Boolean}
  */
 function isCollectionMemberKey(collectionKey, key) {
-  return _Str__WEBPACK_IMPORTED_MODULE_6__.startsWith(key, collectionKey) && key.length > collectionKey.length;
+  return _Str__WEBPACK_IMPORTED_MODULE_7__.startsWith(key, collectionKey) && key.length > collectionKey.length;
 }
 
 /**
@@ -249,7 +290,7 @@ function isCollectionMemberKey(collectionKey, key) {
  */
 function isKeyMatch(configKey, key) {
   return isCollectionKey(configKey) ?
-  _Str__WEBPACK_IMPORTED_MODULE_6__.startsWith(key, configKey) :
+  _Str__WEBPACK_IMPORTED_MODULE_7__.startsWith(key, configKey) :
   configKey === key;
 }
 
@@ -274,13 +315,13 @@ function isSafeEvictionKey(testKey) {
  * @returns {Mixed}
  */
 function tryGetCachedValue(key) {let mapping = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  let val = _OnyxCache__WEBPACK_IMPORTED_MODULE_3__["default"].getValue(key);
+  let val = _OnyxCache__WEBPACK_IMPORTED_MODULE_4__["default"].getValue(key);
 
   if (isCollectionKey(key)) {
-    const allKeys = _OnyxCache__WEBPACK_IMPORTED_MODULE_3__["default"].getAllKeys();
+    const allKeys = _OnyxCache__WEBPACK_IMPORTED_MODULE_4__["default"].getAllKeys();
     const matchingKeys = underscore__WEBPACK_IMPORTED_MODULE_1___default().filter(allKeys, (k) => k.startsWith(key));
     const values = underscore__WEBPACK_IMPORTED_MODULE_1___default().reduce(matchingKeys, (finalObject, matchedKey) => {
-      const cachedValue = _OnyxCache__WEBPACK_IMPORTED_MODULE_3__["default"].getValue(matchedKey);
+      const cachedValue = _OnyxCache__WEBPACK_IMPORTED_MODULE_4__["default"].getValue(matchedKey);
       if (cachedValue) {
         // This is permissible because we're in the process of constructing the final object in a reduce function.
         // eslint-disable-next-line no-param-reassign
@@ -396,12 +437,12 @@ function addAllSafeEvictionKeysToRecentlyAccessedList() {
  * @returns {Object}
  */
 function getCachedCollection(collectionKey) {
-  const collectionMemberKeys = underscore__WEBPACK_IMPORTED_MODULE_1___default().filter(_OnyxCache__WEBPACK_IMPORTED_MODULE_3__["default"].getAllKeys(),
+  const collectionMemberKeys = underscore__WEBPACK_IMPORTED_MODULE_1___default().filter(_OnyxCache__WEBPACK_IMPORTED_MODULE_4__["default"].getAllKeys(),
   (storedKey) => isCollectionMemberKey(collectionKey, storedKey));
 
 
   return underscore__WEBPACK_IMPORTED_MODULE_1___default().reduce(collectionMemberKeys, (prev, curr) => {
-    const cachedValue = _OnyxCache__WEBPACK_IMPORTED_MODULE_3__["default"].getValue(curr);
+    const cachedValue = _OnyxCache__WEBPACK_IMPORTED_MODULE_4__["default"].getValue(curr);
     if (!cachedValue) {
       return prev;
     }
@@ -433,7 +474,7 @@ function keysChanged(collectionKey, partialCollection) {let notifyRegularSubscib
     }
 
     // Skip iteration if we do not have a collection key or a collection member key on this subscriber
-    if (!_Str__WEBPACK_IMPORTED_MODULE_6__.startsWith(subscriber.key, collectionKey)) {
+    if (!_Str__WEBPACK_IMPORTED_MODULE_7__.startsWith(subscriber.key, collectionKey)) {
       continue;
     }
 
@@ -519,7 +560,7 @@ function keysChanged(collectionKey, partialCollection) {let notifyRegularSubscib
             finalCollection[dataKey] = cachedCollection[dataKey];
           }
 
-          _metrics_PerformanceUtils__WEBPACK_IMPORTED_MODULE_7__.logSetStateCall(subscriber, prevState[subscriber.statePropertyName], finalCollection, 'keysChanged', collectionKey);
+          _metrics_PerformanceUtils__WEBPACK_IMPORTED_MODULE_8__.logSetStateCall(subscriber, prevState[subscriber.statePropertyName], finalCollection, 'keysChanged', collectionKey);
           return {
             [subscriber.statePropertyName]: finalCollection
           };
@@ -544,7 +585,7 @@ function keysChanged(collectionKey, partialCollection) {let notifyRegularSubscib
             const prevData = prevState[subscriber.statePropertyName];
             const newData = getSubsetOfData(cachedCollection[subscriber.key], subscriber.selector, subscriber.withOnyxInstance.state);
             if (!(0,fast_equals__WEBPACK_IMPORTED_MODULE_0__.deepEqual)(prevData, newData)) {
-              _metrics_PerformanceUtils__WEBPACK_IMPORTED_MODULE_7__.logSetStateCall(subscriber, prevData, newData, 'keysChanged', collectionKey);
+              _metrics_PerformanceUtils__WEBPACK_IMPORTED_MODULE_8__.logSetStateCall(subscriber, prevData, newData, 'keysChanged', collectionKey);
               return {
                 [subscriber.statePropertyName]: newData
               };
@@ -560,14 +601,14 @@ function keysChanged(collectionKey, partialCollection) {let notifyRegularSubscib
           const previousData = prevState[subscriber.statePropertyName];
 
           // Avoids triggering unnecessary re-renders when feeding empty objects
-          if (_utils__WEBPACK_IMPORTED_MODULE_8__["default"].areObjectsEmpty(data, previousData)) {
+          if (_utils__WEBPACK_IMPORTED_MODULE_9__["default"].areObjectsEmpty(data, previousData)) {
             return null;
           }
           if (data === previousData) {
             return null;
           }
 
-          _metrics_PerformanceUtils__WEBPACK_IMPORTED_MODULE_7__.logSetStateCall(subscriber, previousData, data, 'keysChanged', collectionKey);
+          _metrics_PerformanceUtils__WEBPACK_IMPORTED_MODULE_8__.logSetStateCall(subscriber, previousData, data, 'keysChanged', collectionKey);
           return {
             [subscriber.statePropertyName]: data
           };
@@ -645,7 +686,7 @@ function keyChanged(key, data, canUpdateSubscriber) {let notifyRegularSubscibers
               ...newData
             };
             if (!(0,fast_equals__WEBPACK_IMPORTED_MODULE_0__.deepEqual)(prevData, prevDataWithNewData)) {
-              _metrics_PerformanceUtils__WEBPACK_IMPORTED_MODULE_7__.logSetStateCall(subscriber, prevData, newData, 'keyChanged', key);
+              _metrics_PerformanceUtils__WEBPACK_IMPORTED_MODULE_8__.logSetStateCall(subscriber, prevData, newData, 'keyChanged', key);
               return {
                 [subscriber.statePropertyName]: prevDataWithNewData
               };
@@ -661,7 +702,7 @@ function keyChanged(key, data, canUpdateSubscriber) {let notifyRegularSubscibers
             ...collection,
             [key]: data
           };
-          _metrics_PerformanceUtils__WEBPACK_IMPORTED_MODULE_7__.logSetStateCall(subscriber, collection, newCollection, 'keyChanged', key);
+          _metrics_PerformanceUtils__WEBPACK_IMPORTED_MODULE_8__.logSetStateCall(subscriber, collection, newCollection, 'keyChanged', key);
           return {
             [subscriber.statePropertyName]: newCollection
           };
@@ -690,14 +731,14 @@ function keyChanged(key, data, canUpdateSubscriber) {let notifyRegularSubscibers
         const previousData = prevState[subscriber.statePropertyName];
 
         // Avoids triggering unnecessary re-renders when feeding empty objects
-        if (_utils__WEBPACK_IMPORTED_MODULE_8__["default"].areObjectsEmpty(data, previousData)) {
+        if (_utils__WEBPACK_IMPORTED_MODULE_9__["default"].areObjectsEmpty(data, previousData)) {
           return null;
         }
         if (previousData === data) {
           return null;
         }
 
-        _metrics_PerformanceUtils__WEBPACK_IMPORTED_MODULE_7__.logSetStateCall(subscriber, previousData, data, 'keyChanged', key);
+        _metrics_PerformanceUtils__WEBPACK_IMPORTED_MODULE_8__.logSetStateCall(subscriber, previousData, data, 'keyChanged', key);
         return {
           [subscriber.statePropertyName]: data
         };
@@ -721,9 +762,10 @@ function keyChanged(key, data, canUpdateSubscriber) {let notifyRegularSubscibers
  * @param {Function} [mapping.callback]
  * @param {String} [mapping.selector]
  * @param {*|null} val
- * @param {String} matchedKey
+ * @param {String|undefined} matchedKey
+ * @param {Boolean} isBatched
  */
-function sendDataToConnection(mapping, val, matchedKey) {
+function sendDataToConnection(mapping, val, matchedKey, isBatched) {
   // If the mapping no longer exists then we should not send any data.
   // This means our subscriber disconnected or withOnyx wrapped component unmounted.
   if (!callbackToStateMapping[mapping.connectionID]) {
@@ -743,8 +785,14 @@ function sendDataToConnection(mapping, val, matchedKey) {
       }
     }
 
-    _metrics_PerformanceUtils__WEBPACK_IMPORTED_MODULE_7__.logSetStateCall(mapping, null, newData, 'sendDataToConnection');
-    mapping.withOnyxInstance.setWithOnyxState(mapping.statePropertyName, newData);
+    _metrics_PerformanceUtils__WEBPACK_IMPORTED_MODULE_8__.logSetStateCall(mapping, null, newData, 'sendDataToConnection');
+    if (isBatched) {
+      batchUpdates(() => {
+        mapping.withOnyxInstance.setWithOnyxState(mapping.statePropertyName, newData);
+      });
+    } else {
+      mapping.withOnyxInstance.setWithOnyxState(mapping.statePropertyName, newData);
+    }
     return;
   }
 
@@ -766,7 +814,7 @@ function addKeyToRecentlyAccessedIfNeeded(mapping) {
   }
 
   // Try to free some cache whenever we connect to a safe eviction key
-  _OnyxCache__WEBPACK_IMPORTED_MODULE_3__["default"].removeLeastRecentlyUsedKeys();
+  _OnyxCache__WEBPACK_IMPORTED_MODULE_4__["default"].removeLeastRecentlyUsedKeys();
 
   if (mapping.withOnyxInstance && !isCollectionKey(mapping.key)) {
     // All React components subscribing to a key flagged as a safe eviction key must implement the canEvict property.
@@ -794,7 +842,7 @@ function getCollectionDataAndSendAsObject(matchingKeys, mapping) {
     finalObject[matchingKeys[i]] = value;
     return finalObject;
   }, {})).
-  then((val) => sendDataToConnection(mapping, val));
+  then((val) => sendDataToConnection(mapping, val, undefined, true));
 }
 
 /**
@@ -849,7 +897,9 @@ function connect(mapping) {
     // since there are none matched. In withOnyx() we wait for all connected keys to return a value before rendering the child
     // component. This null value will be filtered out so that the connected component can utilize defaultProps.
     if (matchingKeys.length === 0) {
-      sendDataToConnection(mapping, null);
+      // Here we cannot use batching because the null value is expected to be set immediately for default props
+      // or they will be undefined.
+      sendDataToConnection(mapping, null, undefined, false);
       return;
     }
 
@@ -865,13 +915,13 @@ function connect(mapping) {
 
         // We did not opt into using waitForCollectionCallback mode so the callback is called for every matching key.
         for (let i = 0; i < matchingKeys.length; i++) {
-          get(matchingKeys[i]).then((val) => sendDataToConnection(mapping, val, matchingKeys[i]));
+          get(matchingKeys[i]).then((val) => sendDataToConnection(mapping, val, matchingKeys[i], true));
         }
         return;
       }
 
       // If we are not subscribed to a collection key then there's only a single key to send an update for.
-      get(mapping.key).then((val) => sendDataToConnection(mapping, val, mapping.key));
+      get(mapping.key).then((val) => sendDataToConnection(mapping, val, mapping.key, true));
       return;
     }
 
@@ -884,7 +934,7 @@ function connect(mapping) {
       }
 
       // If the subscriber is not using a collection key then we just send a single value back to the subscriber
-      get(mapping.key).then((val) => sendDataToConnection(mapping, val, mapping.key));
+      get(mapping.key).then((val) => sendDataToConnection(mapping, val, mapping.key, true));
       return;
     }
 
@@ -918,47 +968,6 @@ function disconnect(connectionID, keyToRemoveFromEvictionBlocklist) {
   delete callbackToStateMapping[connectionID];
 }
 
-let batchUpdatesPromise = null;
-let batchUpdatesQueue = [];
-
-/**
- * We are batching together onyx updates. This helps with use cases where we schedule onyx updates after each other.
- * This happens for example in the Onyx.update function, where we process API responses that might contain a lot of
- * update operations. Instead of calling the subscribers for each update operation, we batch them together which will
- * cause react to schedule the updates at once instead of after each other. This is mainly a performance optimization.
- * @returns {Promise}
- */
-function maybeFlushBatchUpdates() {
-  if (batchUpdatesPromise) {
-    return batchUpdatesPromise;
-  }
-
-  batchUpdatesPromise = new Promise((resolve) => {
-    /* We use (setTimeout, 0) here which should be called once native module calls are flushed (usually at the end of the frame)
-     * We may investigate if (setTimeout, 1) (which in React Native is equal to requestAnimationFrame) works even better
-     * then the batch will be flushed on next frame.
-     */
-    setTimeout(() => {
-      const updatesCopy = batchUpdatesQueue;
-      batchUpdatesQueue = [];
-      batchUpdatesPromise = null;
-      (0,_batch__WEBPACK_IMPORTED_MODULE_9__["default"])(() => {
-        updatesCopy.forEach((applyUpdates) => {
-          applyUpdates();
-        });
-      });
-
-      resolve();
-    }, 0);
-  });
-  return batchUpdatesPromise;
-}
-
-function batchUpdates(updates) {
-  batchUpdatesQueue.push(updates);
-  return maybeFlushBatchUpdates();
-}
-
 /**
  * Schedules an update that will be appended to the macro task queue (so it doesn't update the subscribers immediately).
  *
@@ -999,9 +1008,9 @@ function scheduleNotifyCollectionSubscribers(key, value) {
  * @return {Promise}
  */
 function remove(key) {
-  _OnyxCache__WEBPACK_IMPORTED_MODULE_3__["default"].drop(key);
+  _OnyxCache__WEBPACK_IMPORTED_MODULE_4__["default"].drop(key);
   scheduleSubscriberUpdate(key, null);
-  return _storage__WEBPACK_IMPORTED_MODULE_4__["default"].removeItem(key);
+  return _storage__WEBPACK_IMPORTED_MODULE_5__["default"].removeItem(key);
 }
 
 /**
@@ -1009,12 +1018,12 @@ function remove(key) {
  * @returns {Promise<void>}
  */
 function reportStorageQuota() {
-  return _storage__WEBPACK_IMPORTED_MODULE_4__["default"].getDatabaseSize().
+  return _storage__WEBPACK_IMPORTED_MODULE_5__["default"].getDatabaseSize().
   then((_ref) => {let { bytesUsed, bytesRemaining } = _ref;
-    _Logger__WEBPACK_IMPORTED_MODULE_5__.logInfo(`Storage Quota Check -- bytesUsed: ${bytesUsed} bytesRemaining: ${bytesRemaining}`);
+    _Logger__WEBPACK_IMPORTED_MODULE_6__.logInfo(`Storage Quota Check -- bytesUsed: ${bytesUsed} bytesRemaining: ${bytesRemaining}`);
   }).
   catch((dbSizeError) => {
-    _Logger__WEBPACK_IMPORTED_MODULE_5__.logAlert(`Unable to get database size. Error: ${dbSizeError}`);
+    _Logger__WEBPACK_IMPORTED_MODULE_6__.logAlert(`Unable to get database size. Error: ${dbSizeError}`);
   });
 }
 
@@ -1030,10 +1039,10 @@ function reportStorageQuota() {
  * @return {Promise}
  */
 function evictStorageAndRetry(error, onyxMethod) {for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {args[_key - 2] = arguments[_key];}
-  _Logger__WEBPACK_IMPORTED_MODULE_5__.logInfo(`Failed to save to storage. Error: ${error}. onyxMethod: ${onyxMethod.name}`);
+  _Logger__WEBPACK_IMPORTED_MODULE_6__.logInfo(`Failed to save to storage. Error: ${error}. onyxMethod: ${onyxMethod.name}`);
 
-  if (error && _Str__WEBPACK_IMPORTED_MODULE_6__.startsWith(error.message, 'Failed to execute \'put\' on \'IDBObjectStore\'')) {
-    _Logger__WEBPACK_IMPORTED_MODULE_5__.logAlert('Attempted to set invalid data set in Onyx. Please ensure all data is serializable.');
+  if (error && _Str__WEBPACK_IMPORTED_MODULE_7__.startsWith(error.message, 'Failed to execute \'put\' on \'IDBObjectStore\'')) {
+    _Logger__WEBPACK_IMPORTED_MODULE_6__.logAlert('Attempted to set invalid data set in Onyx. Please ensure all data is serializable.');
     throw error;
   }
 
@@ -1043,12 +1052,12 @@ function evictStorageAndRetry(error, onyxMethod) {for (var _len = arguments.leng
     // If we have no acceptable keys to remove then we are possibly trying to save mission critical data. If this is the case,
     // then we should stop retrying as there is not much the user can do to fix this. Instead of getting them stuck in an infinite loop we
     // will allow this write to be skipped.
-    _Logger__WEBPACK_IMPORTED_MODULE_5__.logAlert('Out of storage. But found no acceptable keys to remove.');
+    _Logger__WEBPACK_IMPORTED_MODULE_6__.logAlert('Out of storage. But found no acceptable keys to remove.');
     return reportStorageQuota();
   }
 
   // Remove the least recently viewed key that is not currently being accessed and retry.
-  _Logger__WEBPACK_IMPORTED_MODULE_5__.logInfo(`Out of storage. Evicting least recently accessed key (${keyForRemoval}) and retrying.`);
+  _Logger__WEBPACK_IMPORTED_MODULE_6__.logInfo(`Out of storage. Evicting least recently accessed key (${keyForRemoval}) and retrying.`);
   reportStorageQuota();
   return remove(keyForRemoval).
   then(() => onyxMethod(...args));
@@ -1065,14 +1074,14 @@ function evictStorageAndRetry(error, onyxMethod) {for (var _len = arguments.leng
  */
 function broadcastUpdate(key, value, hasChanged, method) {
   // Logging properties only since values could be sensitive things we don't want to log
-  _Logger__WEBPACK_IMPORTED_MODULE_5__.logInfo(`${method}() called for key: ${key}${underscore__WEBPACK_IMPORTED_MODULE_1___default().isObject(value) ? ` properties: ${underscore__WEBPACK_IMPORTED_MODULE_1___default().keys(value).join(',')}` : ''}`);
+  _Logger__WEBPACK_IMPORTED_MODULE_6__.logInfo(`${method}() called for key: ${key}${underscore__WEBPACK_IMPORTED_MODULE_1___default().isObject(value) ? ` properties: ${underscore__WEBPACK_IMPORTED_MODULE_1___default().keys(value).join(',')}` : ''}`);
 
   // Update subscribers if the cached value has changed, or when the subscriber specifically requires
   // all updates regardless of value changes (indicated by initWithStoredValues set to false).
   if (hasChanged) {
-    _OnyxCache__WEBPACK_IMPORTED_MODULE_3__["default"].set(key, value);
+    _OnyxCache__WEBPACK_IMPORTED_MODULE_4__["default"].set(key, value);
   } else {
-    _OnyxCache__WEBPACK_IMPORTED_MODULE_3__["default"].addToAccessedKeys(key);
+    _OnyxCache__WEBPACK_IMPORTED_MODULE_4__["default"].addToAccessedKeys(key);
   }
 
   return scheduleSubscriberUpdate(key, value, (subscriber) => hasChanged || subscriber.initWithStoredValues === false);
@@ -1100,12 +1109,12 @@ function set(key, value) {
   }
 
   if (hasPendingMergeForKey(key)) {
-    _Logger__WEBPACK_IMPORTED_MODULE_5__.logAlert(`Onyx.set() called after Onyx.merge() for key: ${key}. It is recommended to use set() or merge() not both.`);
+    _Logger__WEBPACK_IMPORTED_MODULE_6__.logAlert(`Onyx.set() called after Onyx.merge() for key: ${key}. It is recommended to use set() or merge() not both.`);
   }
 
-  const valueWithNullRemoved = _utils__WEBPACK_IMPORTED_MODULE_8__["default"].removeNullObjectValues(value);
+  const valueWithNullRemoved = _utils__WEBPACK_IMPORTED_MODULE_9__["default"].removeNullObjectValues(value);
 
-  const hasChanged = _OnyxCache__WEBPACK_IMPORTED_MODULE_3__["default"].hasValueChanged(key, valueWithNullRemoved);
+  const hasChanged = _OnyxCache__WEBPACK_IMPORTED_MODULE_4__["default"].hasValueChanged(key, valueWithNullRemoved);
 
   // This approach prioritizes fast UI changes without waiting for data to be stored in device storage.
   const updatePromise = broadcastUpdate(key, valueWithNullRemoved, hasChanged, 'set');
@@ -1115,7 +1124,7 @@ function set(key, value) {
     return updatePromise;
   }
 
-  return _storage__WEBPACK_IMPORTED_MODULE_4__["default"].setItem(key, valueWithNullRemoved).
+  return _storage__WEBPACK_IMPORTED_MODULE_5__["default"].setItem(key, valueWithNullRemoved).
   catch((error) => evictStorageAndRetry(error, set, key, valueWithNullRemoved)).
   then(() => updatePromise);
 }
@@ -1145,11 +1154,11 @@ function multiSet(data) {
 
   const updatePromises = underscore__WEBPACK_IMPORTED_MODULE_1___default().map(data, (val, key) => {
     // Update cache and optimistically inform subscribers on the next tick
-    _OnyxCache__WEBPACK_IMPORTED_MODULE_3__["default"].set(key, val);
+    _OnyxCache__WEBPACK_IMPORTED_MODULE_4__["default"].set(key, val);
     return scheduleSubscriberUpdate(key, val);
   });
 
-  return _storage__WEBPACK_IMPORTED_MODULE_4__["default"].multiSet(keyValuePairs).
+  return _storage__WEBPACK_IMPORTED_MODULE_5__["default"].multiSet(keyValuePairs).
   catch((error) => evictStorageAndRetry(error, multiSet, data)).
   then(() => Promise.all(updatePromises));
 }
@@ -1173,7 +1182,7 @@ function applyMerge(existingValue, changes) {
     // Object values are merged one after the other
     // lodash adds a small overhead so we don't use it here
     // eslint-disable-next-line prefer-object-spread, rulesdir/prefer-underscore-method
-    return underscore__WEBPACK_IMPORTED_MODULE_1___default().reduce(changes, (modifiedData, change) => _utils__WEBPACK_IMPORTED_MODULE_8__["default"].fastMerge(modifiedData, change),
+    return underscore__WEBPACK_IMPORTED_MODULE_1___default().reduce(changes, (modifiedData, change) => _utils__WEBPACK_IMPORTED_MODULE_9__["default"].fastMerge(modifiedData, change),
     existingValue || {});
   }
 
@@ -1222,17 +1231,17 @@ function merge(key, changes) {
       delete mergeQueuePromise[key];
 
       // After that we merge the batched changes with the existing value
-      const modifiedData = _utils__WEBPACK_IMPORTED_MODULE_8__["default"].removeNullObjectValues(applyMerge(existingValue, [batchedChanges]));
+      const modifiedData = _utils__WEBPACK_IMPORTED_MODULE_9__["default"].removeNullObjectValues(applyMerge(existingValue, [batchedChanges]));
 
       // On native platforms we use SQLite which utilises JSON_PATCH to merge changes.
       // JSON_PATCH generally removes top-level nullish values from the stored object.
       // When there is no existing value though, SQLite will just insert the changes as a new value and thus the top-level nullish values won't be removed.
       // Therefore we need to remove nullish values from the `batchedChanges` which are sent to the SQLite, if no existing value is present.
       if (!existingValue) {
-        batchedChanges = _utils__WEBPACK_IMPORTED_MODULE_8__["default"].removeNullObjectValues(batchedChanges);
+        batchedChanges = _utils__WEBPACK_IMPORTED_MODULE_9__["default"].removeNullObjectValues(batchedChanges);
       }
 
-      const hasChanged = _OnyxCache__WEBPACK_IMPORTED_MODULE_3__["default"].hasValueChanged(key, modifiedData);
+      const hasChanged = _OnyxCache__WEBPACK_IMPORTED_MODULE_4__["default"].hasValueChanged(key, modifiedData);
 
       // This approach prioritizes fast UI changes without waiting for data to be stored in device storage.
       const updatePromise = broadcastUpdate(key, modifiedData, hasChanged, 'merge');
@@ -1242,10 +1251,10 @@ function merge(key, changes) {
         return updatePromise;
       }
 
-      return _storage__WEBPACK_IMPORTED_MODULE_4__["default"].mergeItem(key, batchedChanges, modifiedData).
+      return _storage__WEBPACK_IMPORTED_MODULE_5__["default"].mergeItem(key, batchedChanges, modifiedData).
       then(() => updatePromise);
     } catch (error) {
-      _Logger__WEBPACK_IMPORTED_MODULE_5__.logAlert(`An error occurred while applying merge for key: ${key}, Error: ${error}`);
+      _Logger__WEBPACK_IMPORTED_MODULE_6__.logAlert(`An error occurred while applying merge for key: ${key}, Error: ${error}`);
       return Promise.resolve();
     }
   });
@@ -1259,12 +1268,12 @@ function merge(key, changes) {
  * @returns {Promise}
  */
 function initializeWithDefaultKeyStates() {
-  return _storage__WEBPACK_IMPORTED_MODULE_4__["default"].multiGet(underscore__WEBPACK_IMPORTED_MODULE_1___default().keys(defaultKeyStates)).
+  return _storage__WEBPACK_IMPORTED_MODULE_5__["default"].multiGet(underscore__WEBPACK_IMPORTED_MODULE_1___default().keys(defaultKeyStates)).
   then((pairs) => {
     const asObject = underscore__WEBPACK_IMPORTED_MODULE_1___default().object(pairs);
 
-    const merged = _utils__WEBPACK_IMPORTED_MODULE_8__["default"].fastMerge(asObject, defaultKeyStates);
-    _OnyxCache__WEBPACK_IMPORTED_MODULE_3__["default"].merge(merged);
+    const merged = _utils__WEBPACK_IMPORTED_MODULE_9__["default"].fastMerge(asObject, defaultKeyStates);
+    _OnyxCache__WEBPACK_IMPORTED_MODULE_4__["default"].merge(merged);
     underscore__WEBPACK_IMPORTED_MODULE_1___default().each(merged, (val, key) => keyChanged(key, val));
   });
 }
@@ -1312,10 +1321,10 @@ function clear() {let keysToPreserve = arguments.length > 0 && arguments[0] !==
       // 2. Figure out whether it is a collection key or not,
       //      since collection key subscribers need to be updated differently
       if (!isKeyToPreserve) {
-        const oldValue = _OnyxCache__WEBPACK_IMPORTED_MODULE_3__["default"].getValue(key);
+        const oldValue = _OnyxCache__WEBPACK_IMPORTED_MODULE_4__["default"].getValue(key);
         const newValue = underscore__WEBPACK_IMPORTED_MODULE_1___default().get(defaultKeyStates, key, null);
         if (newValue !== oldValue) {
-          _OnyxCache__WEBPACK_IMPORTED_MODULE_3__["default"].set(key, newValue);
+          _OnyxCache__WEBPACK_IMPORTED_MODULE_4__["default"].set(key, newValue);
           const collectionKey = key.substring(0, key.indexOf('_') + 1);
           if (collectionKey) {
             if (!keyValuesToResetAsCollection[collectionKey]) {
@@ -1349,8 +1358,8 @@ function clear() {let keysToPreserve = arguments.length > 0 && arguments[0] !==
     const defaultKeyValuePairs = underscore__WEBPACK_IMPORTED_MODULE_1___default().pairs(underscore__WEBPACK_IMPORTED_MODULE_1___default().omit(defaultKeyStates, keysToPreserve));
 
     // Remove only the items that we want cleared from storage, and reset others to default
-    underscore__WEBPACK_IMPORTED_MODULE_1___default().each(keysToBeClearedFromStorage, (key) => _OnyxCache__WEBPACK_IMPORTED_MODULE_3__["default"].drop(key));
-    return _storage__WEBPACK_IMPORTED_MODULE_4__["default"].removeItems(keysToBeClearedFromStorage).then(() => _storage__WEBPACK_IMPORTED_MODULE_4__["default"].multiSet(defaultKeyValuePairs)).then(() => Promise.all(updatePromises));
+    underscore__WEBPACK_IMPORTED_MODULE_1___default().each(keysToBeClearedFromStorage, (key) => _OnyxCache__WEBPACK_IMPORTED_MODULE_4__["default"].drop(key));
+    return _storage__WEBPACK_IMPORTED_MODULE_5__["default"].removeItems(keysToBeClearedFromStorage).then(() => _storage__WEBPACK_IMPORTED_MODULE_5__["default"].multiSet(defaultKeyValuePairs)).then(() => Promise.all(updatePromises));
   });
 }
 
@@ -1370,7 +1379,7 @@ function clear() {let keysToPreserve = arguments.length > 0 && arguments[0] !==
  */
 function mergeCollection(collectionKey, collection) {
   if (!underscore__WEBPACK_IMPORTED_MODULE_1___default().isObject(collection) || underscore__WEBPACK_IMPORTED_MODULE_1___default().isArray(collection) || underscore__WEBPACK_IMPORTED_MODULE_1___default().isEmpty(collection)) {
-    _Logger__WEBPACK_IMPORTED_MODULE_5__.logInfo('mergeCollection() called with invalid or empty value. Skipping this update.');
+    _Logger__WEBPACK_IMPORTED_MODULE_6__.logInfo('mergeCollection() called with invalid or empty value. Skipping this update.');
     return Promise.resolve();
   }
 
@@ -1386,7 +1395,7 @@ function mergeCollection(collectionKey, collection) {
     }
 
     hasCollectionKeyCheckFailed = true;
-    _Logger__WEBPACK_IMPORTED_MODULE_5__.logAlert(`Provided collection doesn't have all its data belonging to the same parent. CollectionKey: ${collectionKey}, DataKey: ${dataKey}`);
+    _Logger__WEBPACK_IMPORTED_MODULE_6__.logAlert(`Provided collection doesn't have all its data belonging to the same parent. CollectionKey: ${collectionKey}, DataKey: ${dataKey}`);
   });
 
   // Gracefully handle bad mergeCollection updates so it doesn't block the merge queue
@@ -1412,17 +1421,17 @@ function mergeCollection(collectionKey, collection) {
     // New keys will be added via multiSet while existing keys will be updated using multiMerge
     // This is because setting a key that doesn't exist yet with multiMerge will throw errors
     if (keyValuePairsForExistingCollection.length > 0) {
-      promises.push(_storage__WEBPACK_IMPORTED_MODULE_4__["default"].multiMerge(keyValuePairsForExistingCollection));
+      promises.push(_storage__WEBPACK_IMPORTED_MODULE_5__["default"].multiMerge(keyValuePairsForExistingCollection));
     }
 
     if (keyValuePairsForNewCollection.length > 0) {
-      promises.push(_storage__WEBPACK_IMPORTED_MODULE_4__["default"].multiSet(keyValuePairsForNewCollection));
+      promises.push(_storage__WEBPACK_IMPORTED_MODULE_5__["default"].multiSet(keyValuePairsForNewCollection));
     }
 
     // Prefill cache if necessary by calling get() on any existing keys and then merge original data to cache
     // and update all subscribers
     const promiseUpdate = Promise.all(underscore__WEBPACK_IMPORTED_MODULE_1___default().map(existingKeys, get)).then(() => {
-      _OnyxCache__WEBPACK_IMPORTED_MODULE_3__["default"].merge(collection);
+      _OnyxCache__WEBPACK_IMPORTED_MODULE_4__["default"].merge(collection);
       return scheduleNotifyCollectionSubscribers(collectionKey, collection);
     });
 
@@ -1487,10 +1496,10 @@ function update(data) {
  * @param {string[]} keyList
  */
 function setMemoryOnlyKeys(keyList) {
-  _storage__WEBPACK_IMPORTED_MODULE_4__["default"].setMemoryOnlyKeys(keyList);
+  _storage__WEBPACK_IMPORTED_MODULE_5__["default"].setMemoryOnlyKeys(keyList);
 
   // When in memory only mode for certain keys we do not want to ever drop items from the cache as the user will have no way to recover them again via storage.
-  _OnyxCache__WEBPACK_IMPORTED_MODULE_3__["default"].setRecentKeysLimit(Infinity);
+  _OnyxCache__WEBPACK_IMPORTED_MODULE_4__["default"].setRecentKeysLimit(Infinity);
 }
 
 /**
@@ -1534,11 +1543,11 @@ function init()
   }
 
   if (debugSetState) {
-    _metrics_PerformanceUtils__WEBPACK_IMPORTED_MODULE_7__.setShouldDebugSetState(true);
+    _metrics_PerformanceUtils__WEBPACK_IMPORTED_MODULE_8__.setShouldDebugSetState(true);
   }
 
   if (maxCachedKeysCount > 0) {
-    _OnyxCache__WEBPACK_IMPORTED_MODULE_3__["default"].setRecentKeysLimit(maxCachedKeysCount);
+    _OnyxCache__WEBPACK_IMPORTED_MODULE_4__["default"].setRecentKeysLimit(maxCachedKeysCount);
   }
 
   // We need the value of the collection keys later for checking if a
@@ -1562,9 +1571,9 @@ function init()
 
   then(deferredInitTask.resolve);
 
-  if (shouldSyncMultipleInstances && underscore__WEBPACK_IMPORTED_MODULE_1___default().isFunction(_storage__WEBPACK_IMPORTED_MODULE_4__["default"].keepInstancesSync)) {
-    _storage__WEBPACK_IMPORTED_MODULE_4__["default"].keepInstancesSync((key, value) => {
-      _OnyxCache__WEBPACK_IMPORTED_MODULE_3__["default"].set(key, value);
+  if (shouldSyncMultipleInstances && underscore__WEBPACK_IMPORTED_MODULE_1___default().isFunction(_storage__WEBPACK_IMPORTED_MODULE_5__["default"].keepInstancesSync)) {
+    _storage__WEBPACK_IMPORTED_MODULE_5__["default"].keepInstancesSync((key, value) => {
+      _OnyxCache__WEBPACK_IMPORTED_MODULE_4__["default"].set(key, value);
       keyChanged(key, value);
     });
   }
@@ -1581,7 +1590,7 @@ const Onyx = {
   clear,
   getAllKeys,
   init,
-  registerLogger: _Logger__WEBPACK_IMPORTED_MODULE_5__.registerLogger,
+  registerLogger: _Logger__WEBPACK_IMPORTED_MODULE_6__.registerLogger,
   addToEvictionBlockList,
   removeFromEvictionBlockList,
   isSafeEvictionKey,
@@ -1830,16 +1839,13 @@ class OnyxCache {
    * Remove keys that don't fall into the range of recently used keys
    */
   removeLeastRecentlyUsedKeys() {
-    if (this.recentKeys.size <= this.maxRecentKeysSize) {
-      return;
+    while (this.recentKeys.size > this.maxRecentKeysSize) {
+      const iterator = this.recentKeys.values();
+      const value = iterator.next().value;
+      if (value !== undefined) {
+        this.drop(value);
+      }
     }
-
-    // Get the last N keys by doing a negative slice
-    const recentlyAccessed = [...this.recentKeys].slice(-this.maxRecentKeysSize);
-    const storageKeys = underscore__WEBPACK_IMPORTED_MODULE_0___default().keys(this.storageMap);
-    const keysToRemove = underscore__WEBPACK_IMPORTED_MODULE_0___default().difference(storageKeys, recentlyAccessed);
-
-    underscore__WEBPACK_IMPORTED_MODULE_0___default().each(keysToRemove, this.drop);
   }
 
   /**