react-native-onyx 1.0.77 → 1.0.79

package/lib/Onyx.js

@@ -8,6 +8,7 @@ import createDeferredTask from './createDeferredTask';
 import fastMerge from './fastMerge';
 import * as PerformanceUtils from './metrics/PerformanceUtils';
 import Storage from './storage';
+import unstable_batchedUpdates from './batch';
 
 // Method constants
 const METHOD = {
@@ -20,6 +21,7 @@ const METHOD = {
 
 // Key/value store of Onyx key and arrays of values to merge
 const mergeQueue = {};
+const mergeQueuePromise = {};
 
 // Keeps track of the last connectionID that was used so we can keep incrementing it
 let lastConnectionID = 0;
@@ -333,8 +335,10 @@ function getCachedCollection(collectionKey) {
  * @private
  * @param {String} collectionKey
  * @param {Object} partialCollection - a partial collection of grouped member keys
+ * @param {boolean} [notifyRegularSubscibers=true]
+ * @param {boolean} [notifyWithOnyxSubscibers=true]
  */
-function keysChanged(collectionKey, partialCollection) {
+function keysChanged(collectionKey, partialCollection, notifyRegularSubscibers = true, notifyWithOnyxSubscibers = true) {
     // 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().
@@ -366,6 +370,10 @@ function keysChanged(collectionKey, partialCollection) {
 
         // Regular Onyx.connect() subscriber found.
         if (_.isFunction(subscriber.callback)) {
+            if (!notifyRegularSubscibers) {
+                continue;
+            }
+
             // If they are subscribed to the collection key and using waitForCollectionCallback then we'll
             // send the whole cached collection.
             if (isSubscribedToCollectionKey) {
@@ -396,6 +404,10 @@ function keysChanged(collectionKey, partialCollection) {
 
         // React component subscriber found.
         if (subscriber.withOnyxInstance) {
+            if (!notifyWithOnyxSubscibers) {
+                continue;
+            }
+
             // 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) {
@@ -487,8 +499,10 @@ function keysChanged(collectionKey, partialCollection) {
  * @param {String} key
  * @param {*} data
  * @param {Function} [canUpdateSubscriber] only subscribers that pass this truth test will be updated
+ * @param {boolean} [notifyRegularSubscibers=true]
+ * @param {boolean} [notifyWithOnyxSubscibers=true]
  */
-function keyChanged(key, data, canUpdateSubscriber) {
+function keyChanged(key, data, canUpdateSubscriber, notifyRegularSubscibers = true, notifyWithOnyxSubscibers = true) {
     // Add or remove this key from the recentlyAccessedKeys lists
     if (!_.isNull(data)) {
         addLastAccessedKey(key);
@@ -508,6 +522,9 @@ function keyChanged(key, data, canUpdateSubscriber) {
 
         // Subscriber is a regular call to connect() and provided a callback
         if (_.isFunction(subscriber.callback)) {
+            if (!notifyRegularSubscibers) {
+                continue;
+            }
             if (isCollectionKey(subscriber.key) && subscriber.waitForCollectionCallback) {
                 const cachedCollection = getCachedCollection(subscriber.key);
                 cachedCollection[key] = data;
@@ -521,6 +538,10 @@ function keyChanged(key, data, canUpdateSubscriber) {
 
         // Subscriber connected via withOnyx() HOC
         if (subscriber.withOnyxInstance) {
+            if (!notifyWithOnyxSubscibers) {
+                continue;
+            }
+
             // Check if we are subscribing to a collection key and overwrite the collection member key value in state
             if (isCollectionKey(subscriber.key)) {
                 // If the subscriber has a selector, then the consumer of this data must only be given the data
@@ -801,22 +822,62 @@ 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();
+}
+
 /**
- * This method mostly exists for historical reasons as this library was initially designed without a memory cache and one was added later.
- * For this reason, Onyx works more similar to what you might expect from a native AsyncStorage with reads, writes, etc all becoming
- * available async. Since we have code in our main applications that might expect things to work this way it's not safe to change this
- * behavior just yet.
+ * Schedules an update that will be appended to the macro task queue (so it doesn't update the subscribers immediately).
  *
  * @example
- * notifySubscribersOnNextTick(key, value, subscriber => subscriber.initWithStoredValues === false)
+ * scheduleSubscriberUpdate(key, value, subscriber => subscriber.initWithStoredValues === false)
  *
  * @param {String} key
  * @param {*} value
  * @param {Function} [canUpdateSubscriber] only subscribers that pass this truth test will be updated
+ * @returns {Promise}
  */
-// eslint-disable-next-line rulesdir/no-negated-variables
-function notifySubscribersOnNextTick(key, value, canUpdateSubscriber) {
-    Promise.resolve().then(() => keyChanged(key, value, canUpdateSubscriber));
+function scheduleSubscriberUpdate(key, value, canUpdateSubscriber) {
+    const promise = Promise.resolve().then(() => keyChanged(key, value, canUpdateSubscriber, true, false));
+    batchUpdates(() => keyChanged(key, value, canUpdateSubscriber, false, true));
+    return Promise.all([maybeFlushBatchUpdates(), promise]);
 }
 
 /**
@@ -826,10 +887,12 @@ function notifySubscribersOnNextTick(key, value, canUpdateSubscriber) {
  *
  * @param {String} key
  * @param {*} value
+ * @returns {Promise}
  */
-// eslint-disable-next-line rulesdir/no-negated-variables
-function notifyCollectionSubscribersOnNextTick(key, value) {
-    Promise.resolve().then(() => keysChanged(key, value));
+function scheduleNotifyCollectionSubscribers(key, value) {
+    const promise = Promise.resolve().then(() => keysChanged(key, value, true, false));
+    batchUpdates(() => keysChanged(key, value, false, true));
+    return Promise.all([maybeFlushBatchUpdates(), promise]);
 }
 
 /**
@@ -841,7 +904,7 @@ function notifyCollectionSubscribersOnNextTick(key, value) {
  */
 function remove(key) {
     cache.drop(key);
-    notifySubscribersOnNextTick(key, null);
+    scheduleSubscriberUpdate(key, null);
     return Storage.removeItem(key);
 }
 
@@ -902,6 +965,7 @@ function evictStorageAndRetry(error, onyxMethod, ...args) {
  * @param {*} value
  * @param {Boolean} hasChanged
  * @param {String} method
+ * @returns {Promise}
  */
 function broadcastUpdate(key, value, hasChanged, method) {
     // Logging properties only since values could be sensitive things we don't want to log
@@ -915,7 +979,7 @@ function broadcastUpdate(key, value, hasChanged, method) {
         cache.addToAccessedKeys(key);
     }
 
-    notifySubscribersOnNextTick(key, value, subscriber => hasChanged || subscriber.initWithStoredValues === false);
+    return scheduleSubscriberUpdate(key, value, subscriber => hasChanged || subscriber.initWithStoredValues === false);
 }
 
 /**
@@ -966,15 +1030,16 @@ function set(key, value) {
     const hasChanged = cache.hasValueChanged(key, valueWithNullRemoved);
 
     // This approach prioritizes fast UI changes without waiting for data to be stored in device storage.
-    broadcastUpdate(key, valueWithNullRemoved, hasChanged, 'set');
+    const updatePromise = broadcastUpdate(key, valueWithNullRemoved, hasChanged, 'set');
 
     // If the value has not changed, calling Storage.setItem() would be redundant and a waste of performance, so return early instead.
     if (!hasChanged) {
-        return Promise.resolve();
+        return updatePromise;
     }
 
     return Storage.setItem(key, valueWithNullRemoved)
-        .catch(error => evictStorageAndRetry(error, set, key, valueWithNullRemoved));
+        .catch(error => evictStorageAndRetry(error, set, key, valueWithNullRemoved))
+        .then(() => updatePromise);
 }
 
 /**
@@ -1000,14 +1065,15 @@ function prepareKeyValuePairsForStorage(data) {
 function multiSet(data) {
     const keyValuePairs = prepareKeyValuePairsForStorage(data);
 
-    _.each(data, (val, key) => {
+    const updatePromises = _.map(data, (val, key) => {
         // Update cache and optimistically inform subscribers on the next tick
         cache.set(key, val);
-        notifySubscribersOnNextTick(key, val);
+        return scheduleSubscriberUpdate(key, val);
     });
 
     return Storage.multiSet(keyValuePairs)
-        .catch(error => evictStorageAndRetry(error, multiSet, data));
+        .catch(error => evictStorageAndRetry(error, multiSet, data))
+        .then(() => Promise.all(updatePromises));
 }
 
 /**
@@ -1063,19 +1129,19 @@ function merge(key, changes) {
     // Using the initial value from storage in subsequent merge attempts will lead to an incorrect final merged value.
     if (mergeQueue[key]) {
         mergeQueue[key].push(changes);
-        return Promise.resolve();
+        return mergeQueuePromise[key];
     }
     mergeQueue[key] = [changes];
 
-    return get(key)
+    mergeQueuePromise[key] = get(key)
         .then((existingValue) => {
             try {
                 // We first only merge the changes, so we can provide these to the native implementation (SQLite uses only delta changes in "JSON_PATCH" to merge)
                 let batchedChanges = applyMerge(undefined, mergeQueue[key]);
 
-                // Clean up the write queue so we
-                // don't apply these changes again
+                // Clean up the write queue, so we don't apply these changes again
                 delete mergeQueue[key];
+                delete mergeQueuePromise[key];
 
                 // After that we merge the batched changes with the existing value
                 const modifiedData = removeNullObjectValues(applyMerge(existingValue, [batchedChanges]));
@@ -1091,20 +1157,22 @@ function merge(key, changes) {
                 const hasChanged = cache.hasValueChanged(key, modifiedData);
 
                 // This approach prioritizes fast UI changes without waiting for data to be stored in device storage.
-                broadcastUpdate(key, modifiedData, hasChanged, 'merge');
+                const updatePromise = broadcastUpdate(key, modifiedData, hasChanged, 'merge');
 
                 // If the value has not changed, calling Storage.setItem() would be redundant and a waste of performance, so return early instead.
                 if (!hasChanged) {
-                    return Promise.resolve();
+                    return updatePromise;
                 }
 
-                return Storage.mergeItem(key, batchedChanges, modifiedData);
+                return Storage.mergeItem(key, batchedChanges, modifiedData)
+                    .then(() => updatePromise);
             } catch (error) {
                 Logger.logAlert(`An error occurred while applying merge for key: ${key}, Error: ${error}`);
+                return Promise.resolve();
             }
-
-            return Promise.resolve();
         });
+
+    return mergeQueuePromise[key];
 }
 
 /**
@@ -1190,19 +1258,21 @@ function clear(keysToPreserve = []) {
                 keysToBeClearedFromStorage.push(key);
             });
 
+            const updatePromises = [];
+
             // Notify the subscribers for each key/value group so they can receive the new values
             _.each(keyValuesToResetIndividually, (value, key) => {
-                notifySubscribersOnNextTick(key, value);
+                updatePromises.push(scheduleSubscriberUpdate(key, value));
             });
             _.each(keyValuesToResetAsCollection, (value, key) => {
-                notifyCollectionSubscribersOnNextTick(key, value);
+                updatePromises.push(scheduleNotifyCollectionSubscribers(key, value));
             });
 
             const defaultKeyValuePairs = _.pairs(_.omit(defaultKeyStates, keysToPreserve));
 
             // Remove only the items that we want cleared from storage, and reset others to default
             _.each(keysToBeClearedFromStorage, key => cache.drop(key));
-            return Storage.removeItems(keysToBeClearedFromStorage).then(() => Storage.multiSet(defaultKeyValuePairs));
+            return Storage.removeItems(keysToBeClearedFromStorage).then(() => Storage.multiSet(defaultKeyValuePairs)).then(() => Promise.all(updatePromises));
         });
 }
 
@@ -1273,13 +1343,14 @@ function mergeCollection(collectionKey, collection) {
 
             // Prefill cache if necessary by calling get() on any existing keys and then merge original data to cache
             // and update all subscribers
-            Promise.all(_.map(existingKeys, get)).then(() => {
+            const promiseUpdate = Promise.all(_.map(existingKeys, get)).then(() => {
                 cache.merge(collection);
-                keysChanged(collectionKey, collection);
+                return scheduleNotifyCollectionSubscribers(collectionKey, collection);
             });
 
             return Promise.all(promises)
-                .catch(error => evictStorageAndRetry(error, mergeCollection, collection));
+                .catch(error => evictStorageAndRetry(error, mergeCollection, collection))
+                .then(() => promiseUpdate);
         });
 }
 

package/lib/batch.js

@@ -0,0 +1,3 @@
+import {unstable_batchedUpdates} from 'react-dom';
+
+export default unstable_batchedUpdates;

package/lib/batch.native.js

@@ -0,0 +1,3 @@
+import {unstable_batchedUpdates} from 'react-native';
+
+export default unstable_batchedUpdates;

package/lib/storage/providers/SQLiteStorage.js

@@ -88,10 +88,13 @@ const provider = {
              ON CONFLICT DO UPDATE
              SET valueJSON = JSON_PATCH(valueJSON, JSON(:value));
         `;
-        const queryArguments = _.map(pairs, (pair) => {
+
+        const nonNullishPairs = _.filter(pairs, pair => !_.isUndefined(pair[1]));
+        const queryArguments = _.map(nonNullishPairs, (pair) => {
             const value = JSON.stringify(pair[1]);
             return [pair[0], value];
         });
+
         return db.executeBatchAsync([[query, queryArguments]]);
     },
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-onyx",
-  "version": "1.0.77",
+  "version": "1.0.79",
   "author": "Expensify, Inc.",
   "homepage": "https://expensify.com",
   "description": "State management for React Native",
@@ -66,6 +66,7 @@
     "metro-react-native-babel-preset": "^0.72.3",
     "prop-types": "^15.7.2",
     "react": "18.2.0",
+    "react-dom": "^18.1.0",
     "react-native": "0.71.2",
     "react-native-device-info": "^10.3.0",
     "react-native-performance": "^2.0.0",
@@ -79,6 +80,7 @@
   "peerDependencies": {
     "idb-keyval": "^6.2.1",
     "react": ">=18.1.0",
+    "react-dom": ">=18.1.0",
     "react-native-performance": "^5.1.0",
     "react-native-quick-sqlite": "^8.0.0-beta.2",
     "react-native-device-info": "^10.3.0"