react-native-onyx 1.0.60 → 1.0.61

package/lib/Onyx.js

@@ -901,7 +901,6 @@ function broadcastUpdate(key, value, hasChanged, method) {
 }
 
 /**
- * @private
  * @param {String} key
  * @returns {Boolean}
  */
@@ -1409,6 +1408,7 @@ const Onyx = {
     METHOD,
     setMemoryOnlyKeys,
     tryGetCachedValue,
+    hasPendingMergeForKey,
 };
 
 /**

package/lib/withOnyx.js

@@ -41,7 +41,18 @@ export default function (mapOnyxToState) {
                     const key = Str.result(mapping.key, props);
                     const value = Onyx.tryGetCachedValue(key, mapping);
 
-                    if (value !== undefined) {
+                    /**
+                     * 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.
+                     *
+                     * @example
+                     *
+                     * Onyx.merge('report_123', value);
+                     * Navigation.navigate(route); // Where "route" expects the "value" to be available immediately once rendered.
+                     *
+                     * 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.hasPendingMergeForKey(key)) {
                         // eslint-disable-next-line no-param-reassign
                         resultObj[propertyName] = value;
                     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-onyx",
-  "version": "1.0.60",
+  "version": "1.0.61",
   "author": "Expensify, Inc.",
   "homepage": "https://expensify.com",
   "description": "State management for React Native",