react-native-onyx 1.0.18 → 1.0.20

package/README.md

@@ -319,6 +319,9 @@ Sample output of `Onyx.printMetrics()`
 |    1.17sec |   2.20sec |   1.03sec | currentURL, /            |
 ```
 
+# Debug mode
+
+It can be useful to log why Onyx is calling `setState()` on a particular React component so that we can understand which key changed, what changed about the value, and the connected component that ultimately rendered as a result. When used correctly this can help isolate problem areas and unnecessary renders in the code. To enable this feature, pass `debugSetState: true` to the config and grep JS console logs for `[Onyx-Debug]`.
 
 # Development
 

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/get"), require("localforage"), require("lodash/mergeWith"), require("react"));
+		module.exports = factory(require("underscore"), require("expensify-common/lib/str"), require("lodash/get"), require("localforage"), require("lodash/transform"), require("react"));
 	else if(typeof define === 'function' && define.amd)
-		define(["underscore", "expensify-common/lib/str", "lodash/get", "localforage", "lodash/mergeWith", "react"], factory);
+		define(["underscore", "expensify-common/lib/str", "lodash/get", "localforage", "lodash/transform", "react"], factory);
 	else if(typeof exports === 'object')
-		exports["react-native-onyx/web"] = factory(require("underscore"), require("expensify-common/lib/str"), 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("lodash/transform"), require("react"));
 	else
-		root["react-native-onyx/web"] = factory(root["underscore"], root["expensify-common/lib/str"], 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_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["lodash/transform"], 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_lodash_transform__, __WEBPACK_EXTERNAL_MODULE_react__) => {
 return /******/ (() => { // webpackBootstrap
 /******/ 	var __webpack_modules__ = ({
 
@@ -497,7 +497,8 @@ var _storage = _interopRequireDefault(__webpack_require__(/*! ./storage */ "./li
 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;} /* eslint-disable no-continue */
+var _fastMerge = _interopRequireDefault(__webpack_require__(/*! ./fastMerge */ "./lib/fastMerge.js"));
+var PerformanceUtils = _interopRequireWildcard(__webpack_require__(/*! ./metrics/PerformanceUtils */ "./lib/metrics/PerformanceUtils.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;
@@ -814,12 +815,13 @@ function keysChanged(collectionKey, partialCollection) {
       if (isSubscribedToCollectionKey) {
         subscriber.withOnyxInstance.setState(function (prevState) {
           var finalCollection = _underscore.default.clone(prevState[subscriber.statePropertyName] || {});
-
           var dataKeys = _underscore.default.keys(partialCollection);
           for (var _j = 0; _j < dataKeys.length; _j++) {
             var _dataKey = dataKeys[_j];
             finalCollection[_dataKey] = cachedCollection[_dataKey];
           }
+
+          PerformanceUtils.logSetStateCall(subscriber, prevState[subscriber.statePropertyName], finalCollection, 'keysChanged', collectionKey);
           return (0, _defineProperty2.default)({},
           subscriber.statePropertyName, finalCollection);
 
@@ -836,9 +838,18 @@ function keysChanged(collectionKey, partialCollection) {
           return "continue";
         }
 
-        subscriber.withOnyxInstance.setState((0, _defineProperty2.default)({},
-        subscriber.statePropertyName, cachedCollection[subscriber.key]));
+        subscriber.withOnyxInstance.setState(function (prevState) {
+          var data = cachedCollection[subscriber.key];
+          var previousData = prevState[subscriber.statePropertyName];
+          if (data === previousData) {
+            return null;
+          }
+
+          PerformanceUtils.logSetStateCall(subscriber, previousData, data, 'keysChanged', collectionKey);
+          return (0, _defineProperty2.default)({},
+          subscriber.statePropertyName, data);
 
+        });
       }
     }};for (var i = stateMappingKeys.length; i--;) {var _ret = _loop(i);if (_ret === "continue") continue;
   }
@@ -888,20 +899,30 @@ function keyChanged(key, data) {
       if (isCollectionKey(subscriber.key)) {
         subscriber.withOnyxInstance.setState(function (prevState) {
           var collection = prevState[subscriber.statePropertyName] || {};
-          return (0, _defineProperty2.default)({},
-          subscriber.statePropertyName, (0, _extends3.default)({},
+          var newCollection = (0, _extends3.default)({},
           collection, (0, _defineProperty2.default)({},
-          key, data)));
+          key, data));
 
+          PerformanceUtils.logSetStateCall(subscriber, collection, newCollection, 'keyChanged', key);
+          return (0, _defineProperty2.default)({},
+          subscriber.statePropertyName, newCollection);
 
         });
         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));
+      subscriber.withOnyxInstance.setState(function (prevState) {
+        var previousData = prevState[subscriber.statePropertyName];
+        if (previousData === data) {
+          return null;
+        }
+
+        PerformanceUtils.logSetStateCall(subscriber, previousData, data, 'keyChanged', key);
+        return (0, _defineProperty2.default)({},
+        subscriber.statePropertyName, data);
 
+      });
       return "continue";
     }
 
@@ -930,6 +951,7 @@ function sendDataToConnection(config, val, matchedKey) {
   }
 
   if (config.withOnyxInstance) {
+    PerformanceUtils.logSetStateCall(config, null, val, 'sendDataToConnection');
     config.withOnyxInstance.setWithOnyxState(config.statePropertyName, val);
   } else if (_underscore.default.isFunction(config.callback)) {
     config.callback(val, matchedKey);
@@ -1252,7 +1274,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.
@@ -1323,7 +1347,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);});
   });
@@ -1430,7 +1454,7 @@ function mergeCollection(collectionKey, collection) {
  */
 function update(data) {
   // First, validate the Onyx object is in the format we expect
-  _underscore.default.each(data, function (_ref3) {var onyxMethod = _ref3.onyxMethod,key = _ref3.key;
+  _underscore.default.each(data, function (_ref5) {var onyxMethod = _ref5.onyxMethod,key = _ref5.key;
     if (!_underscore.default.contains(['clear', 'set', 'merge', 'mergecollection'], onyxMethod)) {
       throw new Error("Invalid onyxMethod " + onyxMethod + " in Onyx update.");
     }
@@ -1439,7 +1463,7 @@ function update(data) {
     }
   });
 
-  _underscore.default.each(data, function (_ref4) {var onyxMethod = _ref4.onyxMethod,key = _ref4.key,value = _ref4.value;
+  _underscore.default.each(data, function (_ref6) {var onyxMethod = _ref6.onyxMethod,key = _ref6.key,value = _ref6.value;
     switch (onyxMethod) {
       case 'set':
         set(key, value);
@@ -1477,6 +1501,7 @@ function update(data) {
  * of Onyx running in different tabs/windows. Defaults to true for platforms that support local storage (web/desktop)
  * @param {String[]} [option.keysToDisableSyncEvents=[]] Contains keys for which
  * we want to disable sync event across tabs.
+ * @param {Boolean} [options.debugSetState] Enables debugging setState() calls to connected components.
  * @example
  * Onyx.init({
  *     keys: ONYXKEYS,
@@ -1493,13 +1518,18 @@ function init()
 
 
 
-{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;
+
+{var _ref7 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},_ref7$keys = _ref7.keys,keys = _ref7$keys === void 0 ? {} : _ref7$keys,_ref7$initialKeyState = _ref7.initialKeyStates,initialKeyStates = _ref7$initialKeyState === void 0 ? {} : _ref7$initialKeyState,_ref7$safeEvictionKey = _ref7.safeEvictionKeys,safeEvictionKeys = _ref7$safeEvictionKey === void 0 ? [] : _ref7$safeEvictionKey,_ref7$maxCachedKeysCo = _ref7.maxCachedKeysCount,maxCachedKeysCount = _ref7$maxCachedKeysCo === void 0 ? 1000 : _ref7$maxCachedKeysCo,_ref7$captureMetrics = _ref7.captureMetrics,captureMetrics = _ref7$captureMetrics === void 0 ? false : _ref7$captureMetrics,_ref7$shouldSyncMulti = _ref7.shouldSyncMultipleInstances,shouldSyncMultipleInstances = _ref7$shouldSyncMulti === void 0 ? Boolean(__webpack_require__.g.localStorage) : _ref7$shouldSyncMulti,_ref7$keysToDisableSy = _ref7.keysToDisableSyncEvents,keysToDisableSyncEvents = _ref7$keysToDisableSy === void 0 ? [] : _ref7$keysToDisableSy,_ref7$debugSetState = _ref7.debugSetState,debugSetState = _ref7$debugSetState === void 0 ? false : _ref7$debugSetState;
   if (captureMetrics) {
     // The code here is only bundled and applied when the captureMetrics is set
     // eslint-disable-next-line no-use-before-define
     applyDecorators();
   }
 
+  if (debugSetState) {
+    PerformanceUtils.setShouldDebugSetState(true);
+  }
+
   if (maxCachedKeysCount > 0) {
     _OnyxCache.default.setRecentKeysLimit(maxCachedKeysCount);
   }
@@ -1592,8 +1622,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);
 
@@ -1704,7 +1734,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);
@@ -1875,38 +1907,150 @@ 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;
+
+/***/ }),
+
+/***/ "./lib/metrics/PerformanceUtils.js":
+/*!*****************************************!*\
+  !*** ./lib/metrics/PerformanceUtils.js ***!
+  \*****************************************/
+/***/ ((__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.logSetStateCall = logSetStateCall;exports.setShouldDebugSetState = setShouldDebugSetState;var _transform = _interopRequireDefault(__webpack_require__(/*! lodash/transform */ "lodash/transform"));
+var _underscore = _interopRequireDefault(__webpack_require__(/*! underscore */ "underscore"));
+
+var debugSetState = false;
+
+/**
+ * @param {Boolean} debug
+ */
+function setShouldDebugSetState(debug) {
+  debugSetState = debug;
+}
+
+/**
+ * Deep diff between two objects. Useful for figuring out what changed about an object from one render to the next so
+ * that state and props updates can be optimized.
+ *
+ * @param  {Object} object
+ * @param  {Object} base
+ * @return {Object}
+ */
+function diffObject(object, base) {
+  function changes(obj, comparisonObject) {
+    return (0, _transform.default)(obj, function (result, value, key) {
+      if (_underscore.default.isEqual(value, comparisonObject[key])) {
+        return;
+      }
+
+      // eslint-disable-next-line no-param-reassign
+      result[key] = _underscore.default.isObject(value) && _underscore.default.isObject(comparisonObject[key]) ?
+      changes(value, comparisonObject[key]) :
+      value;
+    });
+  }
+  return changes(object, base);
+}
+
+/**
+ * Provide insights into why a setState() call occurred by diffing the before and after values.
+ *
+ * @param {Object} mapping
+ * @param {*} previousValue
+ * @param {*} newValue
+ * @param {String} caller
+ * @param {String} [keyThatChanged]
+ */
+function logSetStateCall(mapping, previousValue, newValue, caller, keyThatChanged) {
+  if (!debugSetState) {
+    return;
+  }
+
+  var logParams = {};
+  if (keyThatChanged) {
+    logParams.keyThatChanged = keyThatChanged;
+  }
+  if (_underscore.default.isObject(newValue) && _underscore.default.isObject(previousValue)) {
+    logParams.difference = diffObject(previousValue, newValue);
+  } else {
+    logParams.previousValue = previousValue;
+    logParams.newValue = newValue;
+  }
+
+  console.debug("[Onyx-Debug] " + mapping.displayName + " setState() called. Subscribed to key '" + mapping.key + "' (" + caller + ")", logParams);
+}
 
 /***/ }),
 
@@ -2008,7 +2152,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"));
 
 
 
@@ -2017,7 +2161,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
@@ -2033,8 +2177,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);
       });
@@ -2155,8 +2302,8 @@ function _default(mapOnyxToState) {var _this = this;
   omit(function (config) {return config.initWithStoredValues === false;}).
   keys().
   value();
-
-  return function (WrappedComponent) {var
+  return function (WrappedComponent) {
+    var displayName = getDisplayName(WrappedComponent);var
     withOnyx = /*#__PURE__*/function (_React$Component) {(0, _inherits2.default)(withOnyx, _React$Component);var _super = _createSuper(withOnyx);
       function withOnyx(props) {var _this2;(0, _classCallCheck2.default)(this, withOnyx);
         _this2 = _super.call(this, props);
@@ -2281,7 +2428,8 @@ function _default(mapOnyxToState) {var _this = this;
           mapping, {
             key: key,
             statePropertyName: statePropertyName,
-            withOnyxInstance: this }));
+            withOnyxInstance: this,
+            displayName: displayName }));
 
         } }, { key: "render", value: function render()
 
@@ -2305,7 +2453,7 @@ function _default(mapOnyxToState) {var _this = this;
             , (0, _extends2.default)({}, propsToPass,
 
             stateToPass, {
-              ref: this.props.forwardedRef, __self: this, __source: { fileName: _jsxFileName, lineNumber: 173, columnNumber: 21 } })));
+              ref: this.props.forwardedRef, __self: this, __source: { fileName: _jsxFileName, lineNumber: 174, columnNumber: 21 } })));
 
 
         } }]);return withOnyx;}(_react.default.Component);
@@ -2320,11 +2468,11 @@ function _default(mapOnyxToState) {var _this = this;
     withOnyx.defaultProps = {
       forwardedRef: undefined };
 
-    withOnyx.displayName = "withOnyx(" + getDisplayName(WrappedComponent) + ")";
+    withOnyx.displayName = "withOnyx(" + displayName + ")";
     return _react.default.forwardRef(function (props, ref) {
       var Component = withOnyx;
       // eslint-disable-next-line react/jsx-props-no-spreading
-      return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, props, { forwardedRef: ref, __self: _this, __source: { fileName: _jsxFileName, lineNumber: 197, columnNumber: 20 } }));
+      return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, props, { forwardedRef: ref, __self: _this, __source: { fileName: _jsxFileName, lineNumber: 198, columnNumber: 20 } }));
     });
   };
 }
@@ -3436,14 +3584,14 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_lodash_get__;
 
 /***/ }),
 
-/***/ "lodash/mergeWith":
+/***/ "lodash/transform":
 /*!***********************************!*\
-  !*** external "lodash/mergeWith" ***!
+  !*** external "lodash/transform" ***!
   \***********************************/
 /***/ ((module) => {
 
 "use strict";
-module.exports = __WEBPACK_EXTERNAL_MODULE_lodash_mergeWith__;
+module.exports = __WEBPACK_EXTERNAL_MODULE_lodash_transform__;
 
 /***/ }),