react-native-onyx 1.0.87 → 1.0.88

package/lib/Onyx.js

@@ -49,6 +49,47 @@ let defaultKeyStates = {};
 // Connections can be made before `Onyx.init`. They would wait for this task before resolving
 const deferredInitTask = createDeferredTask();
 
+let batchUpdatesPromise = null;
+let batchUpdatesQueue = [];
+
+/**
+ * We are batching together onyx updates. This helps with use cases where we schedule onyx updates after each other.
+ * This happens for example in the Onyx.update function, where we process API responses that might contain a lot of
+ * update operations. Instead of calling the subscribers for each update operation, we batch them together which will
+ * cause react to schedule the updates at once instead of after each other. This is mainly a performance optimization.
+ * @returns {Promise}
+ */
+function maybeFlushBatchUpdates() {
+    if (batchUpdatesPromise) {
+        return batchUpdatesPromise;
+    }
+
+    batchUpdatesPromise = new Promise((resolve) => {
+        /* We use (setTimeout, 0) here which should be called once native module calls are flushed (usually at the end of the frame)
+         * We may investigate if (setTimeout, 1) (which in React Native is equal to requestAnimationFrame) works even better
+         * then the batch will be flushed on next frame.
+         */
+        setTimeout(() => {
+            const updatesCopy = batchUpdatesQueue;
+            batchUpdatesQueue = [];
+            batchUpdatesPromise = null;
+            unstable_batchedUpdates(() => {
+                updatesCopy.forEach((applyUpdates) => {
+                    applyUpdates();
+                });
+            });
+
+            resolve();
+        }, 0);
+    });
+    return batchUpdatesPromise;
+}
+
+function batchUpdates(updates) {
+    batchUpdatesQueue.push(updates);
+    return maybeFlushBatchUpdates();
+}
+
 /**
  * Uses a selector function to return a simplified version of sourceData
  * @param {Mixed} sourceData
@@ -638,9 +679,10 @@ function keyChanged(key, data, canUpdateSubscriber, notifyRegularSubscibers = tr
  * @param {Function} [mapping.callback]
  * @param {String} [mapping.selector]
  * @param {*|null} val
- * @param {String} matchedKey
+ * @param {String|undefined} matchedKey
+ * @param {Boolean} isBatched
  */
-function sendDataToConnection(mapping, val, matchedKey) {
+function sendDataToConnection(mapping, val, matchedKey, isBatched) {
     // If the mapping no longer exists then we should not send any data.
     // This means our subscriber disconnected or withOnyx wrapped component unmounted.
     if (!callbackToStateMapping[mapping.connectionID]) {
@@ -661,7 +703,13 @@ function sendDataToConnection(mapping, val, matchedKey) {
         }
 
         PerformanceUtils.logSetStateCall(mapping, null, newData, 'sendDataToConnection');
-        mapping.withOnyxInstance.setWithOnyxState(mapping.statePropertyName, newData);
+        if (isBatched) {
+            batchUpdates(() => {
+                mapping.withOnyxInstance.setWithOnyxState(mapping.statePropertyName, newData);
+            });
+        } else {
+            mapping.withOnyxInstance.setWithOnyxState(mapping.statePropertyName, newData);
+        }
         return;
     }
 
@@ -711,7 +759,7 @@ function getCollectionDataAndSendAsObject(matchingKeys, mapping) {
             finalObject[matchingKeys[i]] = value;
             return finalObject;
         }, {}))
-        .then(val => sendDataToConnection(mapping, val));
+        .then(val => sendDataToConnection(mapping, val, undefined, true));
 }
 
 /**
@@ -766,7 +814,9 @@ function connect(mapping) {
             // since there are none matched. In withOnyx() we wait for all connected keys to return a value before rendering the child
             // component. This null value will be filtered out so that the connected component can utilize defaultProps.
             if (matchingKeys.length === 0) {
-                sendDataToConnection(mapping, null);
+                // Here we cannot use batching because the null value is expected to be set immediately for default props
+                // or they will be undefined.
+                sendDataToConnection(mapping, null, undefined, false);
                 return;
             }
 
@@ -782,13 +832,13 @@ function connect(mapping) {
 
                     // We did not opt into using waitForCollectionCallback mode so the callback is called for every matching key.
                     for (let i = 0; i < matchingKeys.length; i++) {
-                        get(matchingKeys[i]).then(val => sendDataToConnection(mapping, val, matchingKeys[i]));
+                        get(matchingKeys[i]).then(val => sendDataToConnection(mapping, val, matchingKeys[i], true));
                     }
                     return;
                 }
 
                 // If we are not subscribed to a collection key then there's only a single key to send an update for.
-                get(mapping.key).then(val => sendDataToConnection(mapping, val, mapping.key));
+                get(mapping.key).then(val => sendDataToConnection(mapping, val, mapping.key, true));
                 return;
             }
 
@@ -801,7 +851,7 @@ function connect(mapping) {
                 }
 
                 // If the subscriber is not using a collection key then we just send a single value back to the subscriber
-                get(mapping.key).then(val => sendDataToConnection(mapping, val, mapping.key));
+                get(mapping.key).then(val => sendDataToConnection(mapping, val, mapping.key, true));
                 return;
             }
 
@@ -835,47 +885,6 @@ function disconnect(connectionID, keyToRemoveFromEvictionBlocklist) {
     delete callbackToStateMapping[connectionID];
 }
 
-let batchUpdatesPromise = null;
-let batchUpdatesQueue = [];
-
-/**
- * We are batching together onyx updates. This helps with use cases where we schedule onyx updates after each other.
- * This happens for example in the Onyx.update function, where we process API responses that might contain a lot of
- * update operations. Instead of calling the subscribers for each update operation, we batch them together which will
- * cause react to schedule the updates at once instead of after each other. This is mainly a performance optimization.
- * @returns {Promise}
- */
-function maybeFlushBatchUpdates() {
-    if (batchUpdatesPromise) {
-        return batchUpdatesPromise;
-    }
-
-    batchUpdatesPromise = new Promise((resolve) => {
-        /* We use (setTimeout, 0) here which should be called once native module calls are flushed (usually at the end of the frame)
-         * We may investigate if (setTimeout, 1) (which in React Native is equal to requestAnimationFrame) works even better
-         * then the batch will be flushed on next frame.
-         */
-        setTimeout(() => {
-            const updatesCopy = batchUpdatesQueue;
-            batchUpdatesQueue = [];
-            batchUpdatesPromise = null;
-            unstable_batchedUpdates(() => {
-                updatesCopy.forEach((applyUpdates) => {
-                    applyUpdates();
-                });
-            });
-
-            resolve();
-        }, 0);
-    });
-    return batchUpdatesPromise;
-}
-
-function batchUpdates(updates) {
-    batchUpdatesQueue.push(updates);
-    return maybeFlushBatchUpdates();
-}
-
 /**
  * Schedules an update that will be appended to the macro task queue (so it doesn't update the subscribers immediately).
  *

package/package.json

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