react-native-onyx 1.0.17 → 1.0.19

package/dist/web.development.js

@@ -1,13 +1,13 @@
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
-		module.exports = factory(require("underscore"), require("expensify-common/lib/str"), require("lodash/merge"), require("lodash/get"), require("localforage"), require("lodash/mergeWith"), require("react"));
+		module.exports = factory(require("underscore"), require("expensify-common/lib/str"), require("lodash/get"), require("localforage"), require("react"));
 	else if(typeof define === 'function' && define.amd)
-		define(["underscore", "expensify-common/lib/str", "lodash/merge", "lodash/get", "localforage", "lodash/mergeWith", "react"], factory);
+		define(["underscore", "expensify-common/lib/str", "lodash/get", "localforage", "react"], factory);
 	else if(typeof exports === 'object')
-		exports["react-native-onyx/web"] = factory(require("underscore"), require("expensify-common/lib/str"), require("lodash/merge"), require("lodash/get"), require("localforage"), require("lodash/mergeWith"), require("react"));
+		exports["react-native-onyx/web"] = factory(require("underscore"), require("expensify-common/lib/str"), require("lodash/get"), require("localforage"), require("react"));
 	else
-		root["react-native-onyx/web"] = factory(root["underscore"], root["expensify-common/lib/str"], root["lodash/merge"], root["lodash/get"], root["localforage"], root["lodash/mergeWith"], root["react"]);
-})(self, (__WEBPACK_EXTERNAL_MODULE_underscore__, __WEBPACK_EXTERNAL_MODULE_expensify_common_lib_str__, __WEBPACK_EXTERNAL_MODULE_lodash_merge__, __WEBPACK_EXTERNAL_MODULE_lodash_get__, __WEBPACK_EXTERNAL_MODULE_localforage__, __WEBPACK_EXTERNAL_MODULE_lodash_mergeWith__, __WEBPACK_EXTERNAL_MODULE_react__) => {
+		root["react-native-onyx/web"] = factory(root["underscore"], root["expensify-common/lib/str"], root["lodash/get"], root["localforage"], root["react"]);
+})(self, (__WEBPACK_EXTERNAL_MODULE_underscore__, __WEBPACK_EXTERNAL_MODULE_expensify_common_lib_str__, __WEBPACK_EXTERNAL_MODULE_lodash_get__, __WEBPACK_EXTERNAL_MODULE_localforage__, __WEBPACK_EXTERNAL_MODULE_react__) => {
 return /******/ (() => { // webpackBootstrap
 /******/ 	var __webpack_modules__ = ({
 
@@ -489,15 +489,15 @@ function logInfo(message) {
   \*********************/
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
-var _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ "./node_modules/@babel/runtime/helpers/interopRequireDefault.js");Object.defineProperty(exports, "__esModule", ({ value: true }));exports["default"] = void 0;var _slicedToArray2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ "./node_modules/@babel/runtime/helpers/slicedToArray.js"));var _toConsumableArray2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/toConsumableArray */ "./node_modules/@babel/runtime/helpers/toConsumableArray.js"));var _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ "./node_modules/@babel/runtime/helpers/extends.js"));var _defineProperty2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/defineProperty */ "./node_modules/@babel/runtime/helpers/defineProperty.js"));var _underscore = _interopRequireDefault(__webpack_require__(/*! underscore */ "underscore"));
+var _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ "./node_modules/@babel/runtime/helpers/interopRequireDefault.js");Object.defineProperty(exports, "__esModule", ({ value: true }));exports["default"] = void 0;var _slicedToArray2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ "./node_modules/@babel/runtime/helpers/slicedToArray.js"));var _toConsumableArray2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/toConsumableArray */ "./node_modules/@babel/runtime/helpers/toConsumableArray.js"));var _extends3 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ "./node_modules/@babel/runtime/helpers/extends.js"));var _defineProperty2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/defineProperty */ "./node_modules/@babel/runtime/helpers/defineProperty.js"));
+var _underscore = _interopRequireDefault(__webpack_require__(/*! underscore */ "underscore"));
 var _str = _interopRequireDefault(__webpack_require__(/*! expensify-common/lib/str */ "expensify-common/lib/str"));
-var _merge = _interopRequireDefault(__webpack_require__(/*! lodash/merge */ "lodash/merge"));
 var _get = _interopRequireDefault(__webpack_require__(/*! lodash/get */ "lodash/get"));
 var _storage = _interopRequireDefault(__webpack_require__(/*! ./storage */ "./lib/storage/index.web.js"));
 var Logger = _interopRequireWildcard(__webpack_require__(/*! ./Logger */ "./lib/Logger.js"));
 var _OnyxCache = _interopRequireDefault(__webpack_require__(/*! ./OnyxCache */ "./lib/OnyxCache.js"));
 var _createDeferredTask = _interopRequireDefault(__webpack_require__(/*! ./createDeferredTask */ "./lib/createDeferredTask.js"));
-var _mergeWithCustomized = _interopRequireDefault(__webpack_require__(/*! ./mergeWithCustomized */ "./lib/mergeWithCustomized.js"));function _getRequireWildcardCache(nodeInterop) {if (typeof WeakMap !== "function") return null;var cacheBabelInterop = new WeakMap();var cacheNodeInterop = new WeakMap();return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {return nodeInterop ? cacheNodeInterop : cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj, nodeInterop) {if (!nodeInterop && obj && obj.__esModule) {return obj;}if (obj === null || typeof obj !== "object" && typeof obj !== "function") {return { default: obj };}var cache = _getRequireWildcardCache(nodeInterop);if (cache && cache.has(obj)) {return cache.get(obj);}var newObj = {};var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var key in obj) {if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;if (desc && (desc.get || desc.set)) {Object.defineProperty(newObj, key, desc);} else {newObj[key] = obj[key];}}}newObj.default = obj;if (cache) {cache.set(obj, newObj);}return newObj;}
+var _fastMerge = _interopRequireDefault(__webpack_require__(/*! ./fastMerge */ "./lib/fastMerge.js"));function _getRequireWildcardCache(nodeInterop) {if (typeof WeakMap !== "function") return null;var cacheBabelInterop = new WeakMap();var cacheNodeInterop = new WeakMap();return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {return nodeInterop ? cacheNodeInterop : cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj, nodeInterop) {if (!nodeInterop && obj && obj.__esModule) {return obj;}if (obj === null || typeof obj !== "object" && typeof obj !== "function") {return { default: obj };}var cache = _getRequireWildcardCache(nodeInterop);if (cache && cache.has(obj)) {return cache.get(obj);}var newObj = {};var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var key in obj) {if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;if (desc && (desc.get || desc.set)) {Object.defineProperty(newObj, key, desc);} else {newObj[key] = obj[key];}}}newObj.default = obj;if (cache) {cache.set(obj, newObj);}return newObj;} /* eslint-disable no-continue */
 
 // Keeps track of the last connectionID that was used so we can keep incrementing it
 var lastConnectionID = 0;
@@ -598,8 +598,17 @@ function isCollectionKey(key) {
 }
 
 /**
- * Checks to see if a given key matches with the
- * configured key of our connected subscriber
+ * @param {String} collectionKey
+ * @param {String} key
+ * @returns {Boolean}
+ */
+function isCollectionMemberKey(collectionKey, key) {
+  return _str.default.startsWith(key, collectionKey) && key.length > collectionKey.length;
+}
+
+/**
+ * Checks to see if a provided key is the exact configured key of our connected subscriber
+ * or if the provided key is a collection member key (in case our configured key is a "collection key")
  *
  * @private
  * @param {String} configKey
@@ -716,7 +725,7 @@ function addAllSafeEvictionKeysToRecentlyAccessedList() {
  */
 function getCachedCollection(collectionKey) {
   var collectionMemberKeys = _underscore.default.filter(_OnyxCache.default.getAllKeys(),
-  function (storedKey) {return isKeyMatch(collectionKey, storedKey);});
+  function (storedKey) {return isCollectionMemberKey(collectionKey, storedKey);});
 
 
   return _underscore.default.reduce(collectionMemberKeys, function (prev, curr) {
@@ -736,73 +745,103 @@ function getCachedCollection(collectionKey) {
  *
  * @private
  * @param {String} collectionKey
- * @param {Object} collection
+ * @param {Object} partialCollection - a partial collection of grouped member keys
  */
-function keysChanged(collectionKey, collection) {
-  // Find all subscribers that were added with connect() and trigger the callback or setState() with the new data
-  _underscore.default.each(callbackToStateMapping, function (subscriber) {
+function keysChanged(collectionKey, partialCollection) {
+  // We are iterating over all subscribers similar to keyChanged(). However, we are looking for subscribers who are subscribing to either a collection key or
+  // individual collection key member for the collection that is being updated. It is important to note that the collection parameter cane be a PARTIAL collection
+  // and does not represent all of the combined keys and values for a collection key. It is just the "new" data that was merged in via mergeCollection().
+  var stateMappingKeys = _underscore.default.keys(callbackToStateMapping);var _loop = function _loop(
+  i) {
+    var subscriber = callbackToStateMapping[stateMappingKeys[i]];
     if (!subscriber) {
-      return;
+      return "continue";
+    }
+
+    // Skip iteration if we do not have a collection key or a collection member key on this subscriber
+    if (!_str.default.startsWith(subscriber.key, collectionKey)) {
+      return "continue";
     }
 
     /**
      * e.g. Onyx.connect({key: ONYXKEYS.COLLECTION.REPORT, callback: ...});
      */
-    var isSubscribedToCollectionKey = isKeyMatch(subscriber.key, collectionKey) &&
-    isCollectionKey(subscriber.key);
+    var isSubscribedToCollectionKey = subscriber.key === collectionKey;
 
     /**
      * e.g. Onyx.connect({key: `${ONYXKEYS.COLLECTION.REPORT}{reportID}`, callback: ...});
      */
-    var isSubscribedToCollectionMemberKey = subscriber.key.startsWith(collectionKey);
+    var isSubscribedToCollectionMemberKey = isCollectionMemberKey(collectionKey, subscriber.key);
 
-    if (isSubscribedToCollectionKey) {
-      if (_underscore.default.isFunction(subscriber.callback)) {
-        var cachedCollection = getCachedCollection(collectionKey);
+    // We prepare the "cached collection" which is the entire collection + the new partial data that
+    // was merged in via mergeCollection().
+    var cachedCollection = getCachedCollection(collectionKey);
 
+    // Regular Onyx.connect() subscriber found.
+    if (_underscore.default.isFunction(subscriber.callback)) {
+      // If they are subscribed to the collection key and using waitForCollectionCallback then we'll
+      // send the whole cached collection.
+      if (isSubscribedToCollectionKey) {
         if (subscriber.waitForCollectionCallback) {
           subscriber.callback(cachedCollection);
-          return;
+          return "continue";
         }
 
-        _underscore.default.each(collection, function (data, dataKey) {
+        // If they are not using waitForCollectionCallback then we notify the subscriber with
+        // the new merged data but only for any keys in the partial collection.
+        var dataKeys = _underscore.default.keys(partialCollection);
+        for (var j = 0; j < dataKeys.length; j++) {
+          var dataKey = dataKeys[j];
           subscriber.callback(cachedCollection[dataKey], dataKey);
-        });
-      } else if (subscriber.withOnyxInstance) {
+        }
+        return "continue";
+      }
+
+      // And if the subscriber is specifically only tracking a particular collection member key then we will
+      // notify them with the cached data for that key only.
+      if (isSubscribedToCollectionMemberKey) {
+        subscriber.callback(cachedCollection[subscriber.key], subscriber.key);
+        return "continue";
+      }
+
+      return "continue";
+    }
+
+    // React component subscriber found.
+    if (subscriber.withOnyxInstance) {
+      // We are subscribed to a collection key so we must update the data in state with the new
+      // collection member key values from the partial update.
+      if (isSubscribedToCollectionKey) {
         subscriber.withOnyxInstance.setState(function (prevState) {
           var finalCollection = _underscore.default.clone(prevState[subscriber.statePropertyName] || {});
-          _underscore.default.each(collection, function (data, dataKey) {
-            if (finalCollection[dataKey]) {
-              (0, _merge.default)(finalCollection[dataKey], data);
-            } else {
-              finalCollection[dataKey] = data;
-            }
-          });
 
+          var dataKeys = _underscore.default.keys(partialCollection);
+          for (var _j = 0; _j < dataKeys.length; _j++) {
+            var _dataKey = dataKeys[_j];
+            finalCollection[_dataKey] = cachedCollection[_dataKey];
+          }
           return (0, _defineProperty2.default)({},
           subscriber.statePropertyName, finalCollection);
 
         });
+        return "continue";
       }
-    } else if (isSubscribedToCollectionMemberKey) {
-      var dataFromCollection = collection[subscriber.key];
 
-      // If `dataFromCollection` happens to not exist, then return early so that there are no unnecessary
-      // re-renderings of the component
-      if (_underscore.default.isUndefined(dataFromCollection)) {
-        return;
-      }
-
-      subscriber.withOnyxInstance.setState(function (prevState) {return (0, _defineProperty2.default)({},
-        subscriber.statePropertyName, _underscore.default.isObject(dataFromCollection) ? (0, _extends2.default)({},
-
-        prevState[subscriber.statePropertyName],
-        dataFromCollection) :
+      // If a React component is only interested in a single key then we can set the cached value directly to the state name.
+      if (isSubscribedToCollectionMemberKey) {
+        // However, we only want to update this subscriber if the partial data contains a change.
+        // Otherwise, we would update them with a value they already have and trigger an unnecessary re-render.
+        var dataFromCollection = partialCollection[subscriber.key];
+        if (_underscore.default.isUndefined(dataFromCollection)) {
+          return "continue";
+        }
 
-        dataFromCollection);});
+        subscriber.withOnyxInstance.setState((0, _defineProperty2.default)({},
+        subscriber.statePropertyName, cachedCollection[subscriber.key]));
 
-    }
-  });
+      }
+    }};for (var i = stateMappingKeys.length; i--;) {var _ret = _loop(i);if (_ret === "continue") continue;
+  }
 }
 
 /**
@@ -820,43 +859,54 @@ function keyChanged(key, data) {
     removeLastAccessedKey(key);
   }
 
-  // Find all subscribers that were added with connect() and trigger the callback or setState() with the new data
-  _underscore.default.each(callbackToStateMapping, function (subscriber) {
+  // We are iterating over all subscribers to see if they are interested in the key that has just changed. If the subscriber's  key is a collection key then we will
+  // notify them if the key that changed is a collection member. Or if it is a regular key notify them when there is an exact match. Depending on whether the subscriber
+  // was connected via withOnyx we will call setState() directly on the withOnyx instance. If it is a regular connection we will pass the data to the provided callback.
+  var stateMappingKeys = _underscore.default.keys(callbackToStateMapping);var _loop2 = function _loop2(
+  i) {
+    var subscriber = callbackToStateMapping[stateMappingKeys[i]];
     if (!subscriber || !isKeyMatch(subscriber.key, key)) {
-      return;
+      return "continue";
     }
 
+    // Subscriber is a regular call to connect() and provided a callback
     if (_underscore.default.isFunction(subscriber.callback)) {
-      if (subscriber.waitForCollectionCallback) {
+      if (isCollectionKey(subscriber.key) && subscriber.waitForCollectionCallback) {
         var cachedCollection = getCachedCollection(subscriber.key);
         cachedCollection[key] = data;
         subscriber.callback(cachedCollection);
-        return;
+        return "continue";
       }
 
       subscriber.callback(data, key);
-      return;
+      return "continue";
     }
 
-    if (!subscriber.withOnyxInstance) {
-      return;
-    }
+    // Subscriber connected via withOnyx() HOC
+    if (subscriber.withOnyxInstance) {
+      // Check if we are subscribing to a collection key and overwrite the collection member key value in state
+      if (isCollectionKey(subscriber.key)) {
+        subscriber.withOnyxInstance.setState(function (prevState) {
+          var collection = prevState[subscriber.statePropertyName] || {};
+          return (0, _defineProperty2.default)({},
+          subscriber.statePropertyName, (0, _extends3.default)({},
+          collection, (0, _defineProperty2.default)({},
+          key, data)));
 
-    // Check if we are subscribing to a collection key and add this item as a collection
-    if (isCollectionKey(subscriber.key)) {
-      subscriber.withOnyxInstance.setState(function (prevState) {
-        var collection = _underscore.default.clone(prevState[subscriber.statePropertyName] || {});
-        collection[key] = data;
-        return (0, _defineProperty2.default)({},
-        subscriber.statePropertyName, collection);
 
-      });
-    } else {
+        });
+        return "continue";
+      }
+
+      // If we did not match on a collection key then we just set the new data to the state property
       subscriber.withOnyxInstance.setState((0, _defineProperty2.default)({},
       subscriber.statePropertyName, data));
 
+      return "continue";
     }
-  });
+
+    console.error('Warning: Found a matching subscriber to a key that changed, but no callback or withOnyxInstance could be found.');};for (var i = stateMappingKeys.length; i--;) {var _ret2 = _loop2(i);if (_ret2 === "continue") continue;
+  }
 }
 
 /**
@@ -870,9 +920,9 @@ function keyChanged(key, data) {
  * @param {string} [config.statePropertyName]
  * @param {function} [config.callback]
  * @param {*|null} val
- * @param {String} key
+ * @param {String} matchedKey
  */
-function sendDataToConnection(config, val, key) {
+function sendDataToConnection(config, val, matchedKey) {
   // 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[config.connectionID]) {
@@ -882,10 +932,54 @@ function sendDataToConnection(config, val, key) {
   if (config.withOnyxInstance) {
     config.withOnyxInstance.setWithOnyxState(config.statePropertyName, val);
   } else if (_underscore.default.isFunction(config.callback)) {
-    config.callback(val, key);
+    config.callback(val, matchedKey);
+  }
+}
+
+/**
+ * We check to see if this key is flagged as safe for eviction and add it to the recentlyAccessedKeys list so that when we
+ * run out of storage the least recently accessed key can be removed.
+ *
+ * @private
+ * @param {Object} mapping
+ */
+function addKeyToRecentlyAccessedIfNeeded(mapping) {
+  if (!isSafeEvictionKey(mapping.key)) {
+    return;
+  }
+
+  // Try to free some cache whenever we connect to a safe eviction key
+  _OnyxCache.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.
+    if (_underscore.default.isUndefined(mapping.canEvict)) {
+      throw new Error("Cannot subscribe to safe eviction key '" +
+      mapping.key + "' without providing a canEvict value.");
+
+    }
+
+    addLastAccessedKey(mapping.key);
   }
 }
 
+/**
+ * Gets the data for a given an array of matching keys, combines them into an object, and sends the result back to the subscriber.
+ *
+ * @private
+ * @param {Array} matchingKeys
+ * @param {Object} mapping
+ */
+function getCollectionDataAndSendAsObject(matchingKeys, mapping) {
+  Promise.all(_underscore.default.map(matchingKeys, function (key) {return get(key);})).
+  then(function (values) {return _underscore.default.reduce(values, function (finalObject, value, i) {
+      // eslint-disable-next-line no-param-reassign
+      finalObject[matchingKeys[i]] = value;
+      return finalObject;
+    }, {});}).
+  then(function (val) {return sendDataToConnection(mapping, val);});
+}
+
 /**
  * Subscribes a react component's state directly to a store key
  *
@@ -918,58 +1012,63 @@ function connect(mapping) {
 
   // Commit connection only after init passes
   deferredInitTask.promise.
-  then(function () {
-    // Check to see if this key is flagged as a safe eviction key and add it to the recentlyAccessedKeys list
-    if (!isSafeEvictionKey(mapping.key)) {
+  then(function () {return addKeyToRecentlyAccessedIfNeeded(mapping);}).
+  then(getAllKeys).
+  then(function (keys) {
+    // We search all the keys in storage to see if any are a "match" for the subscriber we are connecting so that we
+    // can send data back to the subscriber. Note that multiple keys can match as a subscriber could either be
+    // subscribed to a "collection key" or a single key.
+    var matchingKeys = _underscore.default.filter(keys, function (key) {return isKeyMatch(mapping.key, key);});
+
+    // If the key being connected to does not exist we initialize the value with null. For subscribers that connected
+    // directly via connect() they will simply get a null value sent to them without any information about which key matched
+    // 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);
       return;
     }
 
-    // Try to free some cache whenever we connect to a safe eviction key
-    _OnyxCache.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.
-      if (_underscore.default.isUndefined(mapping.canEvict)) {
-        throw new Error("Cannot subscribe to safe eviction key '" +
-        mapping.key + "' without providing a canEvict value.");
+    // When using a callback subscriber we will either trigger the provided callback for each key we find or combine all values
+    // into an object and just make a single call. The latter behavior is enabled by providing a waitForCollectionCallback key
+    // combined with a subscription to a collection key.
+    if (_underscore.default.isFunction(mapping.callback)) {
+      if (isCollectionKey(mapping.key)) {
+        if (mapping.waitForCollectionCallback) {
+          getCollectionDataAndSendAsObject(matchingKeys, mapping);
+          return;
+        }
 
+        // We did not opt into using waitForCollectionCallback mode so the callback is called for every matching key.
+        var _loop3 = function _loop3(i) {
+          get(matchingKeys[i]).then(function (val) {return sendDataToConnection(mapping, val, matchingKeys[i]);});};for (var i = 0; i < matchingKeys.length; i++) {_loop3(i);
+        }
+        return;
       }
 
-      addLastAccessedKey(mapping.key);
+      // 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(function (val) {return sendDataToConnection(mapping, val, mapping.key);});
+      return;
     }
-  }).
-  then(getAllKeys).
-  then(function (keys) {
-    // Find all the keys matched by the config key
-    var matchingKeys = _underscore.default.filter(keys, function (key) {return isKeyMatch(mapping.key, key);});
 
-    // If the key being connected to does not exist, initialize the value with null
-    if (matchingKeys.length === 0) {
-      sendDataToConnection(mapping, null);
+    // If we have a withOnyxInstance that means a React component has subscribed via the withOnyx() HOC and we need to
+    // group collection key member data into an object.
+    if (mapping.withOnyxInstance) {
+      if (isCollectionKey(mapping.key)) {
+        getCollectionDataAndSendAsObject(matchingKeys, mapping);
+        return;
+      }
+
+      // If the subscriber is not using a collection key then we just send a single value back to the subscriber
+      get(mapping.key).then(function (val) {return sendDataToConnection(mapping, val, mapping.key);});
       return;
     }
 
-    // When using a callback subscriber we will trigger the callback
-    // for each key we find. It's up to the subscriber to know whether
-    // to expect a single key or multiple keys in the case of a collection.
-    // React components are an exception since we'll want to send their
-    // initial data as a single object when using collection keys.
-    if (mapping.withOnyxInstance && isCollectionKey(mapping.key) || mapping.waitForCollectionCallback) {
-      Promise.all(_underscore.default.map(matchingKeys, function (key) {return get(key);})).
-      then(function (values) {return _underscore.default.reduce(values, function (finalObject, value, i) {
-          // eslint-disable-next-line no-param-reassign
-          finalObject[matchingKeys[i]] = value;
-          return finalObject;
-        }, {});}).
-      then(function (val) {return sendDataToConnection(mapping, val);});
-    } else {
-      _underscore.default.each(matchingKeys, function (key) {
-        get(key).then(function (val) {return sendDataToConnection(mapping, val, key);});
-      });
-    }
+    console.error('Warning: Onyx.connect() was found without a callback or withOnyxInstance');
   });
 
+  // The connectionID is returned back to the caller so that it can be used to clean up the connection when it's no longer needed
+  // by calling Onyx.disconnect(connectionID).
   return connectionID;
 }
 
@@ -1153,7 +1252,9 @@ function applyMerge(key, data) {
   if (_underscore.default.isObject(data) || _underscore.default.every(mergeValues, _underscore.default.isObject)) {
     // Object values are merged one after the other
     return _underscore.default.reduce(mergeValues, function (modifiedData, mergeValue) {
-      var newData = (0, _mergeWithCustomized.default)({}, modifiedData, mergeValue);
+      // lodash adds a small overhead so we don't use it here
+      // eslint-disable-next-line prefer-object-spread, rulesdir/prefer-underscore-method
+      var newData = (0, _extends3.default)({}, (0, _fastMerge.default)(modifiedData, mergeValue));
 
       // We will also delete any object keys that are undefined or null.
       // Deleting keys is not supported by AsyncStorage so we do it this way.
@@ -1224,7 +1325,7 @@ function initializeWithDefaultKeyStates() {
   then(function (pairs) {
     var asObject = _underscore.default.object(pairs);
 
-    var merged = (0, _mergeWithCustomized.default)(asObject, defaultKeyStates);
+    var merged = (0, _fastMerge.default)(asObject, defaultKeyStates);
     _OnyxCache.default.merge(merged);
     _underscore.default.each(merged, function (val, key) {return keyChanged(key, val);});
   });
@@ -1279,7 +1380,7 @@ function clear() {
  */
 function mergeCollection(collectionKey, collection) {
   // Confirm all the collection keys belong to the same parent
-  _underscore.default.each(collection, function (data, dataKey) {
+  _underscore.default.each(collection, function (_data, dataKey) {
     if (isKeyMatch(collectionKey, dataKey)) {
       return;
     }
@@ -1331,7 +1432,7 @@ function mergeCollection(collectionKey, collection) {
  */
 function update(data) {
   // First, validate the Onyx object is in the format we expect
-  _underscore.default.each(data, function (_ref4) {var onyxMethod = _ref4.onyxMethod,key = _ref4.key;
+  _underscore.default.each(data, function (_ref3) {var onyxMethod = _ref3.onyxMethod,key = _ref3.key;
     if (!_underscore.default.contains(['clear', 'set', 'merge', 'mergecollection'], onyxMethod)) {
       throw new Error("Invalid onyxMethod " + onyxMethod + " in Onyx update.");
     }
@@ -1340,7 +1441,7 @@ function update(data) {
     }
   });
 
-  _underscore.default.each(data, function (_ref5) {var onyxMethod = _ref5.onyxMethod,key = _ref5.key,value = _ref5.value;
+  _underscore.default.each(data, function (_ref4) {var onyxMethod = _ref4.onyxMethod,key = _ref4.key,value = _ref4.value;
     switch (onyxMethod) {
       case 'set':
         set(key, value);
@@ -1394,7 +1495,7 @@ function init()
 
 
 
-{var _ref6 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},_ref6$keys = _ref6.keys,keys = _ref6$keys === void 0 ? {} : _ref6$keys,_ref6$initialKeyState = _ref6.initialKeyStates,initialKeyStates = _ref6$initialKeyState === void 0 ? {} : _ref6$initialKeyState,_ref6$safeEvictionKey = _ref6.safeEvictionKeys,safeEvictionKeys = _ref6$safeEvictionKey === void 0 ? [] : _ref6$safeEvictionKey,_ref6$maxCachedKeysCo = _ref6.maxCachedKeysCount,maxCachedKeysCount = _ref6$maxCachedKeysCo === void 0 ? 1000 : _ref6$maxCachedKeysCo,_ref6$captureMetrics = _ref6.captureMetrics,captureMetrics = _ref6$captureMetrics === void 0 ? false : _ref6$captureMetrics,_ref6$shouldSyncMulti = _ref6.shouldSyncMultipleInstances,shouldSyncMultipleInstances = _ref6$shouldSyncMulti === void 0 ? Boolean(__webpack_require__.g.localStorage) : _ref6$shouldSyncMulti,_ref6$keysToDisableSy = _ref6.keysToDisableSyncEvents,keysToDisableSyncEvents = _ref6$keysToDisableSy === void 0 ? [] : _ref6$keysToDisableSy;
+{var _ref5 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},_ref5$keys = _ref5.keys,keys = _ref5$keys === void 0 ? {} : _ref5$keys,_ref5$initialKeyState = _ref5.initialKeyStates,initialKeyStates = _ref5$initialKeyState === void 0 ? {} : _ref5$initialKeyState,_ref5$safeEvictionKey = _ref5.safeEvictionKeys,safeEvictionKeys = _ref5$safeEvictionKey === void 0 ? [] : _ref5$safeEvictionKey,_ref5$maxCachedKeysCo = _ref5.maxCachedKeysCount,maxCachedKeysCount = _ref5$maxCachedKeysCo === void 0 ? 1000 : _ref5$maxCachedKeysCo,_ref5$captureMetrics = _ref5.captureMetrics,captureMetrics = _ref5$captureMetrics === void 0 ? false : _ref5$captureMetrics,_ref5$shouldSyncMulti = _ref5.shouldSyncMultipleInstances,shouldSyncMultipleInstances = _ref5$shouldSyncMulti === void 0 ? Boolean(__webpack_require__.g.localStorage) : _ref5$shouldSyncMulti,_ref5$keysToDisableSy = _ref5.keysToDisableSyncEvents,keysToDisableSyncEvents = _ref5$keysToDisableSy === void 0 ? [] : _ref5$keysToDisableSy;
   if (captureMetrics) {
     // The code here is only bundled and applied when the captureMetrics is set
     // eslint-disable-next-line no-use-before-define
@@ -1493,8 +1594,8 @@ Onyx;exports["default"] = _default;
   \**************************/
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
-var _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ "./node_modules/@babel/runtime/helpers/interopRequireDefault.js");Object.defineProperty(exports, "__esModule", ({ value: true }));exports["default"] = void 0;var _toConsumableArray2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/toConsumableArray */ "./node_modules/@babel/runtime/helpers/toConsumableArray.js"));var _classCallCheck2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/classCallCheck */ "./node_modules/@babel/runtime/helpers/classCallCheck.js"));var _createClass2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/createClass */ "./node_modules/@babel/runtime/helpers/createClass.js"));var _underscore = _interopRequireDefault(__webpack_require__(/*! underscore */ "underscore"));
-var _mergeWithCustomized = _interopRequireDefault(__webpack_require__(/*! ./mergeWithCustomized */ "./lib/mergeWithCustomized.js"));
+var _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ "./node_modules/@babel/runtime/helpers/interopRequireDefault.js");Object.defineProperty(exports, "__esModule", ({ value: true }));exports["default"] = void 0;var _toConsumableArray2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/toConsumableArray */ "./node_modules/@babel/runtime/helpers/toConsumableArray.js"));var _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ "./node_modules/@babel/runtime/helpers/extends.js"));var _classCallCheck2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/classCallCheck */ "./node_modules/@babel/runtime/helpers/classCallCheck.js"));var _createClass2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/createClass */ "./node_modules/@babel/runtime/helpers/createClass.js"));var _underscore = _interopRequireDefault(__webpack_require__(/*! underscore */ "underscore"));
+var _fastMerge = _interopRequireDefault(__webpack_require__(/*! ./fastMerge */ "./lib/fastMerge.js"));
 
 var isDefined = _underscore.default.negate(_underscore.default.isUndefined);
 
@@ -1605,7 +1706,9 @@ OnyxCache = /*#__PURE__*/function () {
      * @param {Record<string, *>} data - a map of (cache) key - values
      */ }, { key: "merge", value: function merge(
     data) {var _this = this;
-      this.storageMap = (0, _mergeWithCustomized.default)({}, this.storageMap, data);
+      // lodash adds a small overhead so we don't use it here
+      // eslint-disable-next-line prefer-object-spread, rulesdir/prefer-underscore-method
+      this.storageMap = (0, _extends2.default)({}, (0, _fastMerge.default)(this.storageMap, data));
 
       var storageKeys = this.getAllKeys();
       var mergedKeys = _underscore.default.keys(data);
@@ -1776,38 +1879,78 @@ function createDeferredTask() {
 
 /***/ }),
 
-/***/ "./lib/mergeWithCustomized.js":
-/*!************************************!*\
-  !*** ./lib/mergeWithCustomized.js ***!
-  \************************************/
-/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+/***/ "./lib/fastMerge.js":
+/*!**************************!*\
+  !*** ./lib/fastMerge.js ***!
+  \**************************/
+/***/ ((__unused_webpack_module, exports) => {
 
-var _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ "./node_modules/@babel/runtime/helpers/interopRequireDefault.js");Object.defineProperty(exports, "__esModule", ({ value: true }));exports["default"] = void 0;var _mergeWith = _interopRequireDefault(__webpack_require__(/*! lodash/mergeWith */ "lodash/mergeWith"));
+Object.defineProperty(exports, "__esModule", ({ value: true }));exports["default"] = void 0; // Mostly copied from https://medium.com/@lubaka.a/how-to-remove-lodash-performance-improvement-b306669ad0e1
 
 /**
- * When merging 2 objects into onyx that contain an array, we want to completely replace the array instead of the default
- * behavior which is to merge each item by its index.
- * ie:
- * merge({a: [1]}, {a: [2,3]}):
- *  - In the default implementation would produce {a:[1,3]}
- *  - With this function would produce: {a: [2,3]}
- * @param {*} objValue
- * @param {*} srcValue
- * @return {*}
- */
-// eslint-disable-next-line rulesdir/prefer-early-return
-function customizerForMergeWith(objValue, srcValue) {
+ * @param {mixed} val
+ * @returns {boolean}
+*/
+function isMergeableObject(val) {
+  var nonNullObject = val != null ? typeof val === 'object' : false;
+  return nonNullObject &&
+  Object.prototype.toString.call(val) !== '[object RegExp]' &&
+  Object.prototype.toString.call(val) !== '[object Date]';
+}
+
+/**
+ * @param {Object} target
+ * @param {Object} source
+ * @returns {Object}
+*/
+function mergeObject(target, source) {
+  var destination = {};
+  if (isMergeableObject(target)) {
+    // lodash adds a small overhead so we don't use it here
+    // eslint-disable-next-line rulesdir/prefer-underscore-method
+    var targetKeys = Object.keys(target);
+    for (var i = 0; i < targetKeys.length; ++i) {
+      var key = targetKeys[i];
+      destination[key] = target[key];
+    }
+  }
+
+  // lodash adds a small overhead so we don't use it here
   // eslint-disable-next-line rulesdir/prefer-underscore-method
-  if (Array.isArray(objValue)) {
-    return srcValue;
+  var sourceKeys = Object.keys(source);
+  for (var _i = 0; _i < sourceKeys.length; ++_i) {
+    var _key = sourceKeys[_i];
+    if (source[_key] === undefined) {
+      // eslint-disable-next-line no-continue
+      continue;
+    }
+    if (!isMergeableObject(source[_key]) || !target[_key]) {
+      destination[_key] = source[_key];
+    } else {
+      // eslint-disable-next-line no-use-before-define
+      destination[_key] = fastMerge(target[_key], source[_key]);
+    }
   }
+
+  return destination;
 }
 
-function mergeWithCustomized() {for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}
-  return _mergeWith.default.apply(void 0, args.concat([customizerForMergeWith]));
+/**
+ * @param {Object|Array} target
+ * @param {Object|Array} source
+ * @returns {Object|Array}
+*/
+function fastMerge(target, source) {
+  // lodash adds a small overhead so we don't use it here
+  // eslint-disable-next-line rulesdir/prefer-underscore-method
+  var array = Array.isArray(source);
+  if (array) {
+    return source;
+  }
+  return mergeObject(target, source);
 }var _default =
 
-mergeWithCustomized;exports["default"] = _default;
+fastMerge;exports["default"] = _default;
 
 /***/ }),
 
@@ -1909,7 +2052,7 @@ _WebStorage.default;exports["default"] = _default;
   \**********************************************/
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
-var _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ "./node_modules/@babel/runtime/helpers/interopRequireDefault.js");Object.defineProperty(exports, "__esModule", ({ value: true }));exports["default"] = void 0;var _slicedToArray2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ "./node_modules/@babel/runtime/helpers/slicedToArray.js"));
+var _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ "./node_modules/@babel/runtime/helpers/interopRequireDefault.js");Object.defineProperty(exports, "__esModule", ({ value: true }));exports["default"] = void 0;var _slicedToArray2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ "./node_modules/@babel/runtime/helpers/slicedToArray.js"));var _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ "./node_modules/@babel/runtime/helpers/extends.js"));
 
 
 
@@ -1918,7 +2061,7 @@ var _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/inte
 var _localforage = _interopRequireDefault(__webpack_require__(/*! localforage */ "localforage"));
 var _underscore = _interopRequireDefault(__webpack_require__(/*! underscore */ "underscore"));
 var _SyncQueue = _interopRequireDefault(__webpack_require__(/*! ../../SyncQueue */ "./lib/SyncQueue.js"));
-var _mergeWithCustomized = _interopRequireDefault(__webpack_require__(/*! ../../mergeWithCustomized */ "./lib/mergeWithCustomized.js")); /**
+var _fastMerge = _interopRequireDefault(__webpack_require__(/*! ../../fastMerge */ "./lib/fastMerge.js")); /**
  * @file
  * The storage provider based on localforage allows us to store most anything in its
  * natural form in the underlying DB without having to stringify or de-stringify it
@@ -1934,8 +2077,11 @@ var provider = {
     if (shouldMerge) {
       return _localforage.default.getItem(key).
       then(function (existingValue) {
-        var newValue = _underscore.default.isObject(existingValue) ?
-        (0, _mergeWithCustomized.default)({}, existingValue, value) :
+        var newValue = _underscore.default.isObject(existingValue)
+
+        // lodash adds a small overhead so we don't use it here
+        // eslint-disable-next-line prefer-object-spread, rulesdir/prefer-underscore-method
+        ? (0, _extends2.default)({}, (0, _fastMerge.default)(existingValue, value)) :
         value;
         return _localforage.default.setItem(key, newValue);
       });
@@ -3337,28 +3483,6 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_lodash_get__;
 
 /***/ }),
 
-/***/ "lodash/merge":
-/*!*******************************!*\
-  !*** external "lodash/merge" ***!
-  \*******************************/
-/***/ ((module) => {
-
-"use strict";
-module.exports = __WEBPACK_EXTERNAL_MODULE_lodash_merge__;
-
-/***/ }),
-
-/***/ "lodash/mergeWith":
-/*!***********************************!*\
-  !*** external "lodash/mergeWith" ***!
-  \***********************************/
-/***/ ((module) => {
-
-"use strict";
-module.exports = __WEBPACK_EXTERNAL_MODULE_lodash_mergeWith__;
-
-/***/ }),
-
 /***/ "react":
 /*!************************!*\
   !*** external "react" ***!