react-native-onyx 1.0.82 → 1.0.84

package/dist/web.development.js

@@ -77,11 +77,10 @@ __webpack_require__.r(__webpack_exports__);
 /* 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 _createDeferredTask__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./createDeferredTask */ "./lib/createDeferredTask.js");
-/* harmony import */ var _fastMerge__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./fastMerge */ "./lib/fastMerge.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_9__ = __webpack_require__(/*! ./utils */ "./lib/utils.js");
-/* harmony import */ var _batch__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./batch */ "./lib/batch.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");
 /* eslint-disable no-continue */
 
 
@@ -94,7 +93,6 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-
 // Method constants
 const METHOD = {
   SET: 'set',
@@ -499,7 +497,7 @@ function keysChanged(collectionKey, partialCollection) {let notifyRegularSubscib
         // If the subscriber has a selector, then the component's state must only be updated with the data
         // returned by the selector.
         if (subscriber.selector) {
-          subscriber.withOnyxInstance.setState((prevState) => {
+          subscriber.withOnyxInstance.setStateProxy((prevState) => {
             const previousData = prevState[subscriber.statePropertyName];
             const newData = reduceCollectionWithSelector(cachedCollection, subscriber.selector, subscriber.withOnyxInstance.state);
 
@@ -513,7 +511,7 @@ function keysChanged(collectionKey, partialCollection) {let notifyRegularSubscib
           continue;
         }
 
-        subscriber.withOnyxInstance.setState((prevState) => {
+        subscriber.withOnyxInstance.setStateProxy((prevState) => {
           const finalCollection = underscore__WEBPACK_IMPORTED_MODULE_1___default().clone(prevState[subscriber.statePropertyName] || {});
           const dataKeys = underscore__WEBPACK_IMPORTED_MODULE_1___default().keys(partialCollection);
           for (let j = 0; j < dataKeys.length; j++) {
@@ -542,7 +540,7 @@ function keysChanged(collectionKey, partialCollection) {let notifyRegularSubscib
         // returned by the selector and the state should only change when the subset of data changes from what
         // it was previously.
         if (subscriber.selector) {
-          subscriber.withOnyxInstance.setState((prevState) => {
+          subscriber.withOnyxInstance.setStateProxy((prevState) => {
             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)) {
@@ -557,9 +555,14 @@ function keysChanged(collectionKey, partialCollection) {let notifyRegularSubscib
           continue;
         }
 
-        subscriber.withOnyxInstance.setState((prevState) => {
+        subscriber.withOnyxInstance.setStateProxy((prevState) => {
           const data = cachedCollection[subscriber.key];
           const previousData = prevState[subscriber.statePropertyName];
+
+          // Avoids triggering unnecessary re-renders when feeding empty objects
+          if (_utils__WEBPACK_IMPORTED_MODULE_8__["default"].areObjectsEmpty(data, previousData)) {
+            return null;
+          }
           if (data === previousData) {
             return null;
           }
@@ -632,7 +635,7 @@ function keyChanged(key, data, canUpdateSubscriber) {let notifyRegularSubscibers
         // If the subscriber has a selector, then the consumer of this data must only be given the data
         // returned by the selector and only when the selected data has changed.
         if (subscriber.selector) {
-          subscriber.withOnyxInstance.setState((prevState) => {
+          subscriber.withOnyxInstance.setStateProxy((prevState) => {
             const prevData = prevState[subscriber.statePropertyName];
             const newData = {
               [key]: getSubsetOfData(data, subscriber.selector, subscriber.withOnyxInstance.state)
@@ -652,7 +655,7 @@ function keyChanged(key, data, canUpdateSubscriber) {let notifyRegularSubscibers
           continue;
         }
 
-        subscriber.withOnyxInstance.setState((prevState) => {
+        subscriber.withOnyxInstance.setStateProxy((prevState) => {
           const collection = prevState[subscriber.statePropertyName] || {};
           const newCollection = {
             ...collection,
@@ -669,7 +672,7 @@ function keyChanged(key, data, canUpdateSubscriber) {let notifyRegularSubscibers
       // If the subscriber has a selector, then the component's state must only be updated with the data
       // returned by the selector and only if the selected data has changed.
       if (subscriber.selector) {
-        subscriber.withOnyxInstance.setState((prevState) => {
+        subscriber.withOnyxInstance.setStateProxy((prevState) => {
           const previousValue = getSubsetOfData(prevState[subscriber.statePropertyName], subscriber.selector, subscriber.withOnyxInstance.state);
           const newValue = getSubsetOfData(data, subscriber.selector, subscriber.withOnyxInstance.state);
           if (!(0,fast_equals__WEBPACK_IMPORTED_MODULE_0__.deepEqual)(previousValue, newValue)) {
@@ -683,8 +686,13 @@ function keyChanged(key, data, canUpdateSubscriber) {let notifyRegularSubscibers
       }
 
       // If we did not match on a collection key then we just set the new data to the state property
-      subscriber.withOnyxInstance.setState((prevState) => {
+      subscriber.withOnyxInstance.setStateProxy((prevState) => {
         const previousData = prevState[subscriber.statePropertyName];
+
+        // Avoids triggering unnecessary re-renders when feeding empty objects
+        if (_utils__WEBPACK_IMPORTED_MODULE_8__["default"].areObjectsEmpty(data, previousData)) {
+          return null;
+        }
         if (previousData === data) {
           return null;
         }
@@ -812,6 +820,9 @@ function getCollectionDataAndSendAsObject(matchingKeys, mapping) {
  *       The sourceData and withOnyx state are passed to the selector and should return the simplified data. Using this setting on `withOnyx` can have very positive
  *       performance benefits because the component will only re-render when the subset of data changes. Otherwise, any change of data on any property would normally
  *       cause the component to re-render (and that can be expensive from a performance standpoint).
+ * @param {String | Number | Boolean | Object} [mapping.initialValue] THIS PARAM IS ONLY USED WITH withOnyx().
+ * If included, this will be passed to the component so that something can be rendered while data is being fetched from the DB.
+ * Note that it will not cause the component to have the loading prop set to true. |
  * @returns {Number} an ID to use when calling disconnect
  */
 function connect(mapping) {
@@ -931,7 +942,7 @@ function maybeFlushBatchUpdates() {
       const updatesCopy = batchUpdatesQueue;
       batchUpdatesQueue = [];
       batchUpdatesPromise = null;
-      (0,_batch__WEBPACK_IMPORTED_MODULE_8__["default"])(() => {
+      (0,_batch__WEBPACK_IMPORTED_MODULE_9__["default"])(() => {
         updatesCopy.forEach((applyUpdates) => {
           applyUpdates();
         });
@@ -1092,7 +1103,7 @@ function set(key, value) {
     _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.`);
   }
 
-  const valueWithNullRemoved = _utils__WEBPACK_IMPORTED_MODULE_9__["default"].removeNullObjectValues(value);
+  const valueWithNullRemoved = _utils__WEBPACK_IMPORTED_MODULE_8__["default"].removeNullObjectValues(value);
 
   const hasChanged = _OnyxCache__WEBPACK_IMPORTED_MODULE_3__["default"].hasValueChanged(key, valueWithNullRemoved);
 
@@ -1162,7 +1173,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) => (0,_fastMerge__WEBPACK_IMPORTED_MODULE_10__["default"])(modifiedData, change),
+    return underscore__WEBPACK_IMPORTED_MODULE_1___default().reduce(changes, (modifiedData, change) => _utils__WEBPACK_IMPORTED_MODULE_8__["default"].fastMerge(modifiedData, change),
     existingValue || {});
   }
 
@@ -1211,14 +1222,14 @@ function merge(key, changes) {
       delete mergeQueuePromise[key];
 
       // After that we merge the batched changes with the existing value
-      const modifiedData = _utils__WEBPACK_IMPORTED_MODULE_9__["default"].removeNullObjectValues(applyMerge(existingValue, [batchedChanges]));
+      const modifiedData = _utils__WEBPACK_IMPORTED_MODULE_8__["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_9__["default"].removeNullObjectValues(batchedChanges);
+        batchedChanges = _utils__WEBPACK_IMPORTED_MODULE_8__["default"].removeNullObjectValues(batchedChanges);
       }
 
       const hasChanged = _OnyxCache__WEBPACK_IMPORTED_MODULE_3__["default"].hasValueChanged(key, modifiedData);
@@ -1252,7 +1263,7 @@ function initializeWithDefaultKeyStates() {
   then((pairs) => {
     const asObject = underscore__WEBPACK_IMPORTED_MODULE_1___default().object(pairs);
 
-    const merged = (0,_fastMerge__WEBPACK_IMPORTED_MODULE_10__["default"])(asObject, defaultKeyStates);
+    const merged = _utils__WEBPACK_IMPORTED_MODULE_8__["default"].fastMerge(asObject, defaultKeyStates);
     _OnyxCache__WEBPACK_IMPORTED_MODULE_3__["default"].merge(merged);
     underscore__WEBPACK_IMPORTED_MODULE_1___default().each(merged, (val, key) => keyChanged(key, val));
   });
@@ -1637,7 +1648,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var underscore__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(underscore__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var fast_equals__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! fast-equals */ "fast-equals");
 /* harmony import */ var fast_equals__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(fast_equals__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _fastMerge__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./fastMerge */ "./lib/fastMerge.js");
+/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./utils */ "./lib/utils.js");
 
 
 
@@ -1759,7 +1770,7 @@ class OnyxCache {
 
     // 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 = Object.assign({}, (0,_fastMerge__WEBPACK_IMPORTED_MODULE_2__["default"])(this.storageMap, data));
+    this.storageMap = Object.assign({}, _utils__WEBPACK_IMPORTED_MODULE_2__["default"].fastMerge(this.storageMap, data));
 
     const storageKeys = this.getAllKeys();
     const mergedKeys = underscore__WEBPACK_IMPORTED_MODULE_0___default().keys(data);
@@ -1950,87 +1961,6 @@ function createDeferredTask() {
 
 /***/ }),
 
-/***/ "./lib/fastMerge.js":
-/*!**************************!*\
-  !*** ./lib/fastMerge.js ***!
-  \**************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
-/* harmony export */ });
-/* harmony import */ var underscore__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! underscore */ "underscore");
-/* harmony import */ var underscore__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(underscore__WEBPACK_IMPORTED_MODULE_0__);
-
-
-// Mostly copied from https://medium.com/@lubaka.a/how-to-remove-lodash-performance-improvement-b306669ad0e1
-
-/**
- * @param {mixed} val
- * @returns {boolean}
-*/
-function isMergeableObject(val) {
-  const 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) {
-  const destination = {};
-  if (isMergeableObject(target)) {
-    // lodash adds a small overhead so we don't use it here
-    // eslint-disable-next-line rulesdir/prefer-underscore-method
-    const targetKeys = Object.keys(target);
-    for (let i = 0; i < targetKeys.length; ++i) {
-      const 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
-  const sourceKeys = Object.keys(source);
-  for (let i = 0; i < sourceKeys.length; ++i) {
-    const 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;
-}
-
-/**
- * @param {Object|Array} target
- * @param {Object|Array} source
- * @returns {Object|Array}
-*/
-function fastMerge(target, source) {
-  if (underscore__WEBPACK_IMPORTED_MODULE_0___default().isArray(source) || underscore__WEBPACK_IMPORTED_MODULE_0___default().isNull(source) || underscore__WEBPACK_IMPORTED_MODULE_0___default().isUndefined(source)) {
-    return source;
-  }
-  return mergeObject(target, source);
-}
-
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (fastMerge);
-
-/***/ }),
-
 /***/ "./lib/metrics/PerformanceUtils.js":
 /*!*****************************************!*\
   !*** ./lib/metrics/PerformanceUtils.js ***!
@@ -2266,9 +2196,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var idb_keyval__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(idb_keyval__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 _fastMerge__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../fastMerge */ "./lib/fastMerge.js");
-/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../utils */ "./lib/utils.js");
-
+/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../utils */ "./lib/utils.js");
 
 
 
@@ -2315,8 +2243,8 @@ const provider = {
     return getValues.then((values) => {
       const upsertMany = underscore__WEBPACK_IMPORTED_MODULE_1___default().map(pairs, (_ref2, index) => {let [key, value] = _ref2;
         const prev = values[index];
-        const newValue = underscore__WEBPACK_IMPORTED_MODULE_1___default().isObject(prev) ? (0,_fastMerge__WEBPACK_IMPORTED_MODULE_2__["default"])(prev, value) : value;
-        return (0,idb_keyval__WEBPACK_IMPORTED_MODULE_0__.promisifyRequest)(store.put(_utils__WEBPACK_IMPORTED_MODULE_3__["default"].removeNullObjectValues(newValue), key));
+        const newValue = underscore__WEBPACK_IMPORTED_MODULE_1___default().isObject(prev) ? _utils__WEBPACK_IMPORTED_MODULE_2__["default"].fastMerge(prev, value) : value;
+        return (0,idb_keyval__WEBPACK_IMPORTED_MODULE_0__.promisifyRequest)(store.put(_utils__WEBPACK_IMPORTED_MODULE_2__["default"].removeNullObjectValues(newValue), key));
       });
       return Promise.all(upsertMany);
     });
@@ -2416,6 +2344,79 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var underscore__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(underscore__WEBPACK_IMPORTED_MODULE_0__);
 
 
+function areObjectsEmpty(a, b) {
+  return (
+    typeof a === 'object' &&
+    typeof b === 'object' &&
+    underscore__WEBPACK_IMPORTED_MODULE_0__.isEmpty(a) &&
+    underscore__WEBPACK_IMPORTED_MODULE_0__.isEmpty(b));
+
+}
+
+// Mostly copied from https://medium.com/@lubaka.a/how-to-remove-lodash-performance-improvement-b306669ad0e1
+
+/**
+ * @param {mixed} val
+ * @returns {boolean}
+*/
+function isMergeableObject(val) {
+  const 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) {
+  const destination = {};
+  if (isMergeableObject(target)) {
+    // lodash adds a small overhead so we don't use it here
+    // eslint-disable-next-line rulesdir/prefer-underscore-method
+    const targetKeys = Object.keys(target);
+    for (let i = 0; i < targetKeys.length; ++i) {
+      const 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
+  const sourceKeys = Object.keys(source);
+  for (let i = 0; i < sourceKeys.length; ++i) {
+    const 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;
+}
+
+/**
+* @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
+  if (underscore__WEBPACK_IMPORTED_MODULE_0__.isArray(source) || underscore__WEBPACK_IMPORTED_MODULE_0__.isNull(source) || underscore__WEBPACK_IMPORTED_MODULE_0__.isUndefined(source)) {
+    return source;
+  }
+  return mergeObject(target, source);
+}
+
 /**
  * We generally want to remove top-level nullish values from objects written to disk and cache, because it decreases the amount of data stored in memory and on disk.
  * On native, when merging an existing value with new changes, SQLite will use  JSON_PATCH, which removes top-level nullish values.
@@ -2427,16 +2428,16 @@ __webpack_require__.r(__webpack_exports__);
  * @returns {*}
  */
 function removeNullObjectValues(value) {
-  if (underscore__WEBPACK_IMPORTED_MODULE_0___default().isArray(value) || !underscore__WEBPACK_IMPORTED_MODULE_0___default().isObject(value)) {
+  if (underscore__WEBPACK_IMPORTED_MODULE_0__.isArray(value) || !underscore__WEBPACK_IMPORTED_MODULE_0__.isObject(value)) {
     return value;
   }
 
-  const objectWithoutNullObjectValues = underscore__WEBPACK_IMPORTED_MODULE_0___default().omit(value, (objectValue) => underscore__WEBPACK_IMPORTED_MODULE_0___default().isNull(objectValue));
+  const objectWithoutNullObjectValues = underscore__WEBPACK_IMPORTED_MODULE_0__.omit(value, (objectValue) => underscore__WEBPACK_IMPORTED_MODULE_0__.isNull(objectValue));
 
   return objectWithoutNullObjectValues;
 }
 
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({ removeNullObjectValues });
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({ removeNullObjectValues, areObjectsEmpty, fastMerge });
 
 /***/ }),
 
@@ -2459,7 +2460,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var underscore__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(underscore__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var _Onyx__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./Onyx */ "./lib/Onyx.js");
 /* harmony import */ var _Str__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Str */ "./lib/Str.js");
-function _extends() {_extends = Object.assign ? Object.assign.bind() : function (target) {for (var i = 1; i < arguments.length; i++) {var source = arguments[i];for (var key in source) {if (Object.prototype.hasOwnProperty.call(source, key)) {target[key] = source[key];}}}return target;};return _extends.apply(this, arguments);} /**
+/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./utils */ "./lib/utils.js");
+function _extends() {_extends = Object.assign ? Object.assign.bind() : function (target) {for (var i = 1; i < arguments.length; i++) {var source = arguments[i];for (var key in source) {if (Object.prototype.hasOwnProperty.call(source, key)) {target[key] = source[key];}}}return target;};return _extends.apply(this, arguments);}function _defineProperty(obj, key, value) {key = _toPropertyKey(key);if (key in obj) {Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });} else {obj[key] = value;}return obj;}function _toPropertyKey(arg) {var key = _toPrimitive(arg, "string");return typeof key === "symbol" ? key : String(key);}function _toPrimitive(input, hint) {if (typeof input !== "object" || input === null) return input;var prim = input[Symbol.toPrimitive];if (prim !== undefined) {var res = prim.call(input, hint || "default");if (typeof res !== "object") return res;throw new TypeError("@@toPrimitive must return a primitive value.");}return (hint === "string" ? String : Number)(input);} /**
  * This is a higher order component that provides the ability to map a state property directly to
  * something in Onyx (a key/value store). That way, as soon as data in Onyx changes, the state will be set and the view
  * will automatically change to reflect the new data.
@@ -2470,6 +2472,7 @@ function _extends() {_extends = Object.assign ? Object.assign.bind() : function
 
 
 
+
 /**
  * Returns the display name of a component
  *
@@ -2480,7 +2483,7 @@ function getDisplayName(component) {
   return component.displayName || component.name || 'Component';
 }
 
-/* harmony default export */ function __WEBPACK_DEFAULT_EXPORT__(mapOnyxToState) {
+/* harmony default export */ function __WEBPACK_DEFAULT_EXPORT__(mapOnyxToState) {let shouldDelayUpdates = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   // A list of keys that must be present in tempState before we can render the WrappedComponent
   const requiredKeysForInit = underscore__WEBPACK_IMPORTED_MODULE_2___default().chain(mapOnyxToState).
   omit((config) => config.initWithStoredValues === false).
@@ -2489,18 +2492,26 @@ function getDisplayName(component) {
   return (WrappedComponent) => {
     const displayName = getDisplayName(WrappedComponent);
     class withOnyx extends (react__WEBPACK_IMPORTED_MODULE_1___default().Component) {
-      constructor(props) {
-        super(props);
 
+
+      constructor(props) {
+        super(props);_defineProperty(this, "pendingSetStates", []);
+        this.shouldDelayUpdates = shouldDelayUpdates;
         this.setWithOnyxState = this.setWithOnyxState.bind(this);
+        this.flushPendingSetStates = this.flushPendingSetStates.bind(this);
 
         // This stores all the Onyx connection IDs to be used when the component unmounts so everything can be
         // disconnected. It is a key value store with the format {[mapping.key]: connectionID}.
         this.activeConnectionIDs = {};
 
-        const cachedState = underscore__WEBPACK_IMPORTED_MODULE_2___default().reduce(mapOnyxToState, (resultObj, mapping, propertyName) => {
+        const cachedState = underscore__WEBPACK_IMPORTED_MODULE_2___default().reduce(
+        mapOnyxToState,
+        (resultObj, mapping, propertyName) => {
           const key = _Str__WEBPACK_IMPORTED_MODULE_3__.result(mapping.key, props);
-          const value = _Onyx__WEBPACK_IMPORTED_MODULE_4__["default"].tryGetCachedValue(key, mapping);
+          let value = _Onyx__WEBPACK_IMPORTED_MODULE_4__["default"].tryGetCachedValue(key, mapping);
+          if (!value && mapping.initialValue) {
+            value = mapping.initialValue;
+          }
 
           /**
            * If we have a pending merge for a key it could mean that data is being set via Onyx.merge() and someone expects a component to have this data immediately.
@@ -2513,13 +2524,19 @@ function getDisplayName(component) {
            * In reality, Onyx.merge() will only update the subscriber after all merges have been batched and the previous value is retrieved via a get() (returns a promise).
            * So, we won't use the cache optimization here as it will lead us to arbitrarily defer various actions in the application code.
            */
-          if (value !== undefined && !_Onyx__WEBPACK_IMPORTED_MODULE_4__["default"].hasPendingMergeForKey(key)) {
+          if (
+          value !== undefined &&
+          !_Onyx__WEBPACK_IMPORTED_MODULE_4__["default"].hasPendingMergeForKey(key) ||
+          mapping.allowStaleData)
+          {
             // eslint-disable-next-line no-param-reassign
             resultObj[propertyName] = value;
           }
 
           return resultObj;
-        }, {});
+        },
+        {});
+
 
         // If we have all the data we need, then we can render the component immediately
         cachedState.loading = underscore__WEBPACK_IMPORTED_MODULE_2___default().size(cachedState) < requiredKeysForInit.length;
@@ -2562,47 +2579,86 @@ function getDisplayName(component) {
         });
       }
 
+      setStateProxy(modifier) {
+        if (this.shouldDelayUpdates) {
+          this.pendingSetStates.push(modifier);
+        } else {
+          this.setState(modifier);
+        }
+      }
+
       /**
-       * This method is used externally by sendDataToConnection to prevent unnecessary renders while a component
-       * still in a loading state. The temporary initial state is saved to the component instance and setState()
+       * This method is used by the internal raw Onyx `sendDataToConnection`, it is designed to prevent unnecessary renders while a component
+       * still in a "loading" (read "mounting") state. The temporary initial state is saved to the HOC instance and setState()
        * only called once all the necessary data has been collected.
        *
+       * There is however the possibility the component could have been updated by a call to setState()
+       * before the data was "initially" collected. A race condition.
+       * For example some update happened on some key, while onyx was still gathering the initial hydration data.
+       * This update is disptached directly to setStateProxy and therefore the component has the most up-to-date data
+       *
+       * This is a design flaw in Onyx itself as dispatching updates before initial hydration is not a correct event flow.
+       * We however need to workaround this issue in the HOC. The addition of initialValue makes things even more complex,
+       * since you cannot be really sure if the component has been updated before or after the initial hydration. Therefore if
+       * initialValue is there, we just check if the update is different than that and then try to handle it as best as we can.
+       *
        * @param {String} statePropertyName
        * @param {*} val
        */
       setWithOnyxState(statePropertyName, val) {
-        // We might have loaded the values for the onyx keys/mappings already from the cache.
-        // In case we were able to load all the values upfront, the loading state will be false.
-        // However, Onyx.js will always call setWithOnyxState, as it doesn't know that this implementation
-        // already loaded the values from cache. Thus we have to check whether the value has changed
-        // before we set the state to prevent unnecessary renders.
         const prevValue = this.state[statePropertyName];
-        if (!this.state.loading && prevValue === val) {
-          return;
-        }
 
+        // If the component is not loading (read "mounting"), then we can just update the state
         if (!this.state.loading) {
-          this.setState({ [statePropertyName]: val });
+          // Performance optimization, do not trigger update with same values
+          if (prevValue === val || _utils__WEBPACK_IMPORTED_MODULE_5__["default"].areObjectsEmpty(prevValue, val)) {
+            return;
+          }
+
+          this.setStateProxy({ [statePropertyName]: val });
           return;
         }
 
         this.tempState[statePropertyName] = val;
 
-        // All state keys should exist and at least have a value of null
-        if (underscore__WEBPACK_IMPORTED_MODULE_2___default().some(requiredKeysForInit, (key) => underscore__WEBPACK_IMPORTED_MODULE_2___default().isUndefined(this.tempState[key]))) {
+        // If some key does not have a value yet, do not update the state yet
+        const tempStateIsMissingKey = underscore__WEBPACK_IMPORTED_MODULE_2___default().some(requiredKeysForInit, (key) => underscore__WEBPACK_IMPORTED_MODULE_2___default().isUndefined(this.tempState[key]));
+        if (tempStateIsMissingKey) {
           return;
         }
 
-        // Leave untouched previous state to avoid data loss during pre-load updates.
-        // This handles case when setState was called before the setWithOnyxState.
-        // For example, when an Onyx property was updated by keyChanged before the call of the setWithOnyxState.
+        const stateUpdate = { ...this.tempState };
+        delete this.tempState;
+
+        // Full of hacky workarounds to prevent the race condition described above.
         this.setState((prevState) => {
-          const remainingTempState = underscore__WEBPACK_IMPORTED_MODULE_2___default().omit(this.tempState, underscore__WEBPACK_IMPORTED_MODULE_2___default().keys(prevState));
+          const finalState = underscore__WEBPACK_IMPORTED_MODULE_2___default().reduce(stateUpdate, (result, value, key) => {
+            if (key === 'loading') {
+              return result;
+            }
 
-          return { ...remainingTempState, loading: false };
-        });
+            const initialValue = mapOnyxToState[key].initialValue;
+
+            // If initialValue is there and the state contains something different it means
+            // an update has already been received and we can discard the value we are trying to hydrate
+            if (!underscore__WEBPACK_IMPORTED_MODULE_2___default().isUndefined(initialValue) && !underscore__WEBPACK_IMPORTED_MODULE_2___default().isUndefined(prevState[key]) && prevState[key] !== initialValue) {
+              // eslint-disable-next-line no-param-reassign
+              result[key] = prevState[key];
+
+              // if value is already there (without initial value) then we can discard the value we are trying to hydrate
+            } else if (!underscore__WEBPACK_IMPORTED_MODULE_2___default().isUndefined(prevState[key])) {
+              // eslint-disable-next-line no-param-reassign
+              result[key] = prevState[key];
+            } else {
+              // eslint-disable-next-line no-param-reassign
+              result[key] = value;
+            }
+            return result;
+          }, {});
 
-        delete this.tempState;
+          finalState.loading = false;
+          return finalState;
+        });
       }
 
       /**
@@ -2657,7 +2713,23 @@ function getDisplayName(component) {
         });
       }
 
+      flushPendingSetStates() {
+        if (!this.shouldDelayUpdates) {
+          return;
+        }
+
+        this.shouldDelayUpdates = false;
+
+        this.pendingSetStates.forEach((modifier) => {
+          this.setState(modifier);
+        });
+        this.pendingSetStates = [];
+      }
+
       render() {
+        // Remove any null values so that React replaces them with default props
+        const propsToPass = underscore__WEBPACK_IMPORTED_MODULE_2___default().omit(this.props, (underscore__WEBPACK_IMPORTED_MODULE_2___default().isNull));
+
         if (this.state.loading) {
           return null;
         }
@@ -2665,16 +2737,14 @@ function getDisplayName(component) {
         // Remove any internal state properties used by withOnyx
         // that should not be passed to a wrapped component
         let stateToPass = underscore__WEBPACK_IMPORTED_MODULE_2___default().omit(this.state, 'loading');
-        stateToPass = underscore__WEBPACK_IMPORTED_MODULE_2___default().omit(stateToPass, (value) => underscore__WEBPACK_IMPORTED_MODULE_2___default().isNull(value));
-
-        // Remove any null values so that React replaces them with default props
-        const propsToPass = underscore__WEBPACK_IMPORTED_MODULE_2___default().omit(this.props, (value) => underscore__WEBPACK_IMPORTED_MODULE_2___default().isNull(value));
+        stateToPass = underscore__WEBPACK_IMPORTED_MODULE_2___default().omit(stateToPass, (underscore__WEBPACK_IMPORTED_MODULE_2___default().isNull));
 
         // Spreading props and state is necessary in an HOC where the data cannot be predicted
         return /*#__PURE__*/(
-          react__WEBPACK_IMPORTED_MODULE_1___default().createElement(WrappedComponent
-          // eslint-disable-next-line react/jsx-props-no-spreading
-          , _extends({}, propsToPass,
+          react__WEBPACK_IMPORTED_MODULE_1___default().createElement(WrappedComponent, _extends({
+            markReadyForHydration: this.flushPendingSetStates
+            // eslint-disable-next-line react/jsx-props-no-spreading
+          }, propsToPass,
 
           stateToPass, {
             ref: this.props.forwardedRef })));