react-native-onyx 3.0.30 → 3.0.32

package/API.md

@@ -177,7 +177,7 @@ applied in the order they were called. Note: `Onyx.set()` calls do not work this
 **Example**  
 ```js
 Onyx.merge(ONYXKEYS.EMPLOYEE_LIST, ['Joe']); // -> ['Joe']
-Onyx.merge(ONYXKEYS.EMPLOYEE_LIST, ['Jack']); // -> ['Jack']
+Onyx.merge(ONYXKEYS.EMPLOYEE_LIST, ['Jack']); // -> ['Joe', 'Jack']
 Onyx.merge(ONYXKEYS.POLICY, {id: 1}); // -> {id: 1}
 Onyx.merge(ONYXKEYS.POLICY, {name: 'My Workspace'}); // -> {id: 1, name: 'My Workspace'}
 ```

package/dist/Onyx.js

@@ -64,7 +64,7 @@ function init({ keys = {}, initialKeyStates = {}, evictableKeys = [], maxCachedK
             // When a collection is updated, individual members sync separately to other tabs
             // Setting isProcessingCollectionUpdate=true prevents triggering collection callbacks for each individual update
             const isKeyCollectionMember = OnyxUtils_1.default.isCollectionMember(key);
-            OnyxUtils_1.default.keyChanged(key, value, undefined, true, isKeyCollectionMember);
+            OnyxUtils_1.default.keyChanged(key, value, undefined, isKeyCollectionMember);
         });
     }
     if (maxCachedKeysCount > 0) {
@@ -289,8 +289,10 @@ function clear(keysToPreserve = []) {
         var _a;
         OnyxCache_1.default.clearNullishStorageKeys();
         const keysToBeClearedFromStorage = [];
-        const keyValuesToResetAsCollection = {};
         const keyValuesToResetIndividually = {};
+        // We need to store old and new values for collection keys to properly notify subscribers when clearing Onyx
+        // because the notification process needs the old values in cache but at that point they will be already removed from it.
+        const keyValuesToResetAsCollection = {};
         const allKeys = new Set([...cachedKeys, ...initialKeys]);
         // The only keys that should not be cleared are:
         // 1. Anything specifically passed in keysToPreserve (because some keys like language preferences, offline
@@ -320,9 +322,10 @@ function clear(keysToPreserve = []) {
                     }
                     if (collectionKey) {
                         if (!keyValuesToResetAsCollection[collectionKey]) {
-                            keyValuesToResetAsCollection[collectionKey] = {};
+                            keyValuesToResetAsCollection[collectionKey] = { oldValues: {}, newValues: {} };
                         }
-                        keyValuesToResetAsCollection[collectionKey][key] = newValue !== null && newValue !== void 0 ? newValue : undefined;
+                        keyValuesToResetAsCollection[collectionKey].oldValues[key] = oldValue;
+                        keyValuesToResetAsCollection[collectionKey].newValues[key] = newValue !== null && newValue !== void 0 ? newValue : undefined;
                     }
                     else {
                         keyValuesToResetIndividually[key] = newValue !== null && newValue !== void 0 ? newValue : undefined;
@@ -341,7 +344,7 @@ function clear(keysToPreserve = []) {
             updatePromises.push(OnyxUtils_1.default.scheduleSubscriberUpdate(key, value));
         }
         for (const [key, value] of Object.entries(keyValuesToResetAsCollection)) {
-            updatePromises.push(OnyxUtils_1.default.scheduleNotifyCollectionSubscribers(key, value));
+            updatePromises.push(OnyxUtils_1.default.scheduleNotifyCollectionSubscribers(key, value.newValues, value.oldValues));
         }
         const defaultKeyValuePairs = Object.entries(Object.keys(defaultKeyStates)
             .filter((key) => !keysToPreserve.includes(key))

package/dist/OnyxUtils.d.ts

@@ -56,14 +56,6 @@ declare function initStoreValues(keys: DeepRecord<string, OnyxKey>, initialKeySt
  */
 declare function sendActionToDevTools(method: typeof METHOD.MERGE_COLLECTION | typeof METHOD.MULTI_SET | typeof METHOD.SET_COLLECTION, key: undefined, value: OnyxCollection<KeyValueMapping[OnyxKey]>, mergedValue?: undefined): void;
 declare function sendActionToDevTools(method: Exclude<OnyxMethod, typeof METHOD.MERGE_COLLECTION | typeof METHOD.MULTI_SET | typeof METHOD.SET_COLLECTION>, key: OnyxKey, value: OnyxEntry<KeyValueMapping[OnyxKey]>, mergedValue?: OnyxEntry<KeyValueMapping[OnyxKey]>): void;
-/**
- * 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.
- */
-declare function maybeFlushBatchUpdates(): Promise<void>;
-declare function batchUpdates(updates: () => void): Promise<void>;
 /**
  * Takes a collection of items (eg. {testKey_1:{a:'a'}, testKey_2:{b:'b'}})
  * and runs it through a reducer function to return a subset of the data according to a selector.
@@ -148,14 +140,14 @@ declare function getCachedCollection<TKey extends CollectionKeyBase>(collectionK
 /**
  * When a collection of keys change, search for any callbacks matching the collection key and trigger those callbacks
  */
-declare function keysChanged<TKey extends CollectionKeyBase>(collectionKey: TKey, partialCollection: OnyxCollection<KeyValueMapping[TKey]>, partialPreviousCollection: OnyxCollection<KeyValueMapping[TKey]> | undefined, notifyConnectSubscribers?: boolean): void;
+declare function keysChanged<TKey extends CollectionKeyBase>(collectionKey: TKey, partialCollection: OnyxCollection<KeyValueMapping[TKey]>, partialPreviousCollection: OnyxCollection<KeyValueMapping[TKey]> | undefined): void;
 /**
  * When a key change happens, search for any callbacks matching the key or collection key and trigger those callbacks
  *
  * @example
  * keyChanged(key, value, subscriber => subscriber.initWithStoredValues === false)
  */
-declare function keyChanged<TKey extends OnyxKey>(key: TKey, value: OnyxValue<TKey>, canUpdateSubscriber?: (subscriber?: CallbackToStateMapping<OnyxKey>) => boolean, notifyConnectSubscribers?: boolean, isProcessingCollectionUpdate?: boolean): void;
+declare function keyChanged<TKey extends OnyxKey>(key: TKey, value: OnyxValue<TKey>, canUpdateSubscriber?: (subscriber?: CallbackToStateMapping<OnyxKey>) => boolean, isProcessingCollectionUpdate?: boolean): void;
 /**
  * Sends the data obtained from the keys to the connection.
  */
@@ -177,7 +169,7 @@ declare function getCollectionDataAndSendAsObject<TKey extends OnyxKey>(matching
  */
 declare function scheduleSubscriberUpdate<TKey extends OnyxKey>(key: TKey, value: OnyxValue<TKey>, canUpdateSubscriber?: (subscriber?: CallbackToStateMapping<OnyxKey>) => boolean, isProcessingCollectionUpdate?: boolean): Promise<void>;
 /**
- * This method is similar to notifySubscribersOnNextTick but it is built for working specifically with collections
+ * This method is similar to scheduleSubscriberUpdate but it is built for working specifically with collections
  * so that keysChanged() is triggered for the collection and not keyChanged(). If this was not done, then the
  * subscriber callbacks receive the data in a different format than they normally expect and it breaks code.
  */
@@ -327,8 +319,6 @@ declare const OnyxUtils: {
     getDeferredInitTask: typeof getDeferredInitTask;
     initStoreValues: typeof initStoreValues;
     sendActionToDevTools: typeof sendActionToDevTools;
-    maybeFlushBatchUpdates: typeof maybeFlushBatchUpdates;
-    batchUpdates: typeof batchUpdates;
     get: typeof get;
     getAllKeys: typeof getAllKeys;
     getCollectionKeys: typeof getCollectionKeys;

package/dist/OnyxUtils.js

@@ -44,7 +44,6 @@ const DevTools_1 = __importDefault(require("./DevTools"));
 const Logger = __importStar(require("./Logger"));
 const OnyxCache_1 = __importStar(require("./OnyxCache"));
 const Str = __importStar(require("./Str"));
-const batch_1 = __importDefault(require("./batch"));
 const storage_1 = __importDefault(require("./storage"));
 const utils_1 = __importDefault(require("./utils"));
 const createDeferredTask_1 = __importDefault(require("./createDeferredTask"));
@@ -76,6 +75,8 @@ const MAX_STORAGE_OPERATION_RETRY_ATTEMPTS = 5;
 // Key/value store of Onyx key and arrays of values to merge
 let mergeQueue = {};
 let mergeQueuePromise = {};
+// Used to schedule subscriber update to the macro task queue
+let nextMacrotaskPromise = null;
 // Holds a mapping of all the React components that want their state subscribed to a store key
 let callbackToStateMapping = {};
 // Keeps a copy of the values of the onyx collection keys as a map for faster lookups
@@ -84,8 +85,6 @@ let onyxCollectionKeySet = new Set();
 let onyxKeyToSubscriptionIDs = new Map();
 // Optional user-provided key value states set when Onyx initializes or clears
 let defaultKeyStates = {};
-let batchUpdatesPromise = null;
-let batchUpdatesQueue = [];
 // Used for comparison with a new update to avoid invoking the Onyx.connect callback with the same data.
 let lastConnectionCallbackData = new Map();
 let snapshotKey = null;
@@ -164,39 +163,6 @@ function initStoreValues(keys, initialKeyStates, evictableKeys) {
 function sendActionToDevTools(method, key, value, mergedValue = undefined) {
     DevTools_1.default.registerAction(utils_1.default.formatActionName(method, key), value, key ? { [key]: mergedValue || value } : value);
 }
-/**
- * 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.
- */
-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;
-            (0, batch_1.default)(() => {
-                for (const applyUpdates of updatesCopy) {
-                    applyUpdates();
-                }
-            });
-            resolve();
-        }, 0);
-    });
-    return batchUpdatesPromise;
-}
-function batchUpdates(updates) {
-    batchUpdatesQueue.push(updates);
-    return maybeFlushBatchUpdates();
-}
 /**
  * Takes a collection of items (eg. {testKey_1:{a:'a'}, testKey_2:{b:'b'}})
  * and runs it through a reducer function to return a subset of the data according to a selector.
@@ -522,7 +488,7 @@ function getCachedCollection(collectionKey, collectionMemberKeys) {
 /**
  * When a collection of keys change, search for any callbacks matching the collection key and trigger those callbacks
  */
-function keysChanged(collectionKey, partialCollection, partialPreviousCollection, notifyConnectSubscribers = true) {
+function keysChanged(collectionKey, partialCollection, partialPreviousCollection) {
     // We prepare the "cached collection" which is the entire collection + the new partial data that
     // was merged in via mergeCollection().
     const cachedCollection = getCachedCollection(collectionKey);
@@ -550,9 +516,6 @@ function keysChanged(collectionKey, partialCollection, partialPreviousCollection
         const isSubscribedToCollectionMemberKey = isCollectionMemberKey(collectionKey, subscriber.key);
         // Regular Onyx.connect() subscriber found.
         if (typeof subscriber.callback === 'function') {
-            if (!notifyConnectSubscribers) {
-                continue;
-            }
             // If they are subscribed to the collection key and using waitForCollectionCallback then we'll
             // send the whole cached collection.
             if (isSubscribedToCollectionKey) {
@@ -592,7 +555,7 @@ function keysChanged(collectionKey, partialCollection, partialPreviousCollection
  * @example
  * keyChanged(key, value, subscriber => subscriber.initWithStoredValues === false)
  */
-function keyChanged(key, value, canUpdateSubscriber = () => true, notifyConnectSubscribers = true, isProcessingCollectionUpdate = false) {
+function keyChanged(key, value, canUpdateSubscriber = () => true, isProcessingCollectionUpdate = false) {
     var _a, _b;
     // Add or remove this key from the recentlyAccessedKeys lists
     if (value !== null) {
@@ -630,9 +593,6 @@ function keyChanged(key, value, canUpdateSubscriber = () => true, notifyConnectS
         }
         // Subscriber is a regular call to connect() and provided a callback
         if (typeof subscriber.callback === 'function') {
-            if (!notifyConnectSubscribers) {
-                continue;
-            }
             if (lastConnectionCallbackData.has(subscriber.subscriptionID) && lastConnectionCallbackData.get(subscriber.subscriptionID) === value) {
                 continue;
             }
@@ -701,6 +661,22 @@ function getCollectionDataAndSendAsObject(matchingKeys, mapping) {
         sendDataToConnection(mapping, data, mapping.key);
     });
 }
+/**
+ * Delays promise resolution until the next macrotask to prevent race condition if the key subscription is in progress.
+ *
+ * @param callback The keyChanged/keysChanged callback
+ * */
+function prepareSubscriberUpdate(callback) {
+    if (!nextMacrotaskPromise) {
+        nextMacrotaskPromise = new Promise((resolve) => {
+            setTimeout(() => {
+                nextMacrotaskPromise = null;
+                resolve();
+            }, 0);
+        });
+    }
+    return Promise.all([nextMacrotaskPromise, Promise.resolve().then(callback)]).then();
+}
 /**
  * Schedules an update that will be appended to the macro task queue (so it doesn't update the subscribers immediately).
  *
@@ -708,19 +684,15 @@ function getCollectionDataAndSendAsObject(matchingKeys, mapping) {
  * scheduleSubscriberUpdate(key, value, subscriber => subscriber.initWithStoredValues === false)
  */
 function scheduleSubscriberUpdate(key, value, canUpdateSubscriber = () => true, isProcessingCollectionUpdate = false) {
-    const promise = Promise.resolve().then(() => keyChanged(key, value, canUpdateSubscriber, true, isProcessingCollectionUpdate));
-    batchUpdates(() => keyChanged(key, value, canUpdateSubscriber, false, isProcessingCollectionUpdate));
-    return Promise.all([maybeFlushBatchUpdates(), promise]).then(() => undefined);
+    return prepareSubscriberUpdate(() => keyChanged(key, value, canUpdateSubscriber, isProcessingCollectionUpdate));
 }
 /**
- * This method is similar to notifySubscribersOnNextTick but it is built for working specifically with collections
+ * This method is similar to scheduleSubscriberUpdate but it is built for working specifically with collections
  * so that keysChanged() is triggered for the collection and not keyChanged(). If this was not done, then the
  * subscriber callbacks receive the data in a different format than they normally expect and it breaks code.
  */
 function scheduleNotifyCollectionSubscribers(key, value, previousValue) {
-    const promise = Promise.resolve().then(() => keysChanged(key, value, previousValue, true));
-    batchUpdates(() => keysChanged(key, value, previousValue, false));
-    return Promise.all([maybeFlushBatchUpdates(), promise]).then(() => undefined);
+    return prepareSubscriberUpdate(() => keysChanged(key, value, previousValue));
 }
 /**
  * Remove a key from Onyx and update the subscribers
@@ -1394,7 +1366,6 @@ function clearOnyxUtilsInternals() {
     mergeQueuePromise = {};
     callbackToStateMapping = {};
     onyxKeyToSubscriptionIDs = new Map();
-    batchUpdatesQueue = [];
     lastConnectionCallbackData = new Map();
 }
 const OnyxUtils = {
@@ -1405,8 +1376,6 @@ const OnyxUtils = {
     getDeferredInitTask,
     initStoreValues,
     sendActionToDevTools,
-    maybeFlushBatchUpdates,
-    batchUpdates,
     get,
     getAllKeys,
     getCollectionKeys,
@@ -1462,10 +1431,6 @@ GlobalSettings.addGlobalSettingsChangeListener(({ enablePerformanceMetrics }) =>
     // We are reassigning the functions directly so that internal function calls are also decorated
     // @ts-expect-error Reassign
     initStoreValues = (0, metrics_1.default)(initStoreValues, 'OnyxUtils.initStoreValues');
-    // @ts-expect-error Reassign
-    maybeFlushBatchUpdates = (0, metrics_1.default)(maybeFlushBatchUpdates, 'OnyxUtils.maybeFlushBatchUpdates');
-    // @ts-expect-error Reassign
-    batchUpdates = (0, metrics_1.default)(batchUpdates, 'OnyxUtils.batchUpdates');
     // @ts-expect-error Complex type signature
     get = (0, metrics_1.default)(get, 'OnyxUtils.get');
     // @ts-expect-error Reassign

package/dist/useOnyx.js

@@ -254,7 +254,7 @@ function useOnyx(key, options, dependencies = []) {
             OnyxSnapshotCache_1.default.setCachedResult(key, cacheKey, resultRef.current);
         }
         return resultRef.current;
-    }, [options === null || options === void 0 ? void 0 : options.initWithStoredValues, options === null || options === void 0 ? void 0 : options.allowStaleData, options === null || options === void 0 ? void 0 : options.canBeMissing, key, memoizedSelector, cacheKey]);
+    }, [options === null || options === void 0 ? void 0 : options.initWithStoredValues, options === null || options === void 0 ? void 0 : options.allowStaleData, options === null || options === void 0 ? void 0 : options.canBeMissing, key, memoizedSelector, cacheKey, previousKey]);
     const subscribe = (0, react_1.useCallback)((onStoreChange) => {
         isConnectingRef.current = true;
         onStoreChangeFnRef.current = onStoreChange;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-onyx",
-  "version": "3.0.30",
+  "version": "3.0.32",
   "author": "Expensify, Inc.",
   "homepage": "https://expensify.com",
   "description": "State management for React Native",
@@ -65,7 +65,6 @@
     "@types/lodash": "^4.14.202",
     "@types/node": "^20.11.5",
     "@types/react": "^18.2.14",
-    "@types/react-dom": "^18.2.18",
     "@types/react-native": "^0.70.0",
     "@types/underscore": "^1.11.15",
     "@typescript-eslint/eslint-plugin": "^8.51.0",
@@ -89,7 +88,6 @@
     "prettier": "^2.8.8",
     "prop-types": "^15.7.2",
     "react": "18.2.0",
-    "react-dom": "18.2.0",
     "react-native": "0.76.3",
     "react-native-device-info": "^10.3.0",
     "react-native-nitro-modules": "^0.27.2",
@@ -104,7 +102,6 @@
   "peerDependencies": {
     "idb-keyval": "^6.2.1",
     "react": ">=18.1.0",
-    "react-dom": ">=18.1.0",
     "react-native": ">=0.75.0",
     "react-native-device-info": "^10.3.0",
     "react-native-nitro-modules": ">=0.27.2",

package/dist/batch.d.ts

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

package/dist/batch.js

@@ -1,4 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_dom_1 = require("react-dom");
-exports.default = react_dom_1.unstable_batchedUpdates;

package/dist/batch.native.d.ts

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

package/dist/batch.native.js

@@ -1,4 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_native_1 = require("react-native");
-exports.default = react_native_1.unstable_batchedUpdates;