react-native-onyx 3.0.29 → 3.0.31

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) {

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

@@ -186,10 +186,10 @@ function useOnyx(key, options, dependencies = []) {
             OnyxSnapshotCache_1.default.setCachedResult(key, cacheKey, result);
             return result;
         }
-        // We get the value from cache while the first connection to Onyx is being made,
-        // so we can return any cached value right away. After the connection is made, we only
+        // We get the value from cache while the first connection to Onyx is being made or if the key has changed,
+        // so we can return any cached value right away. For the case where the key has changed, If we don't return the cached value right away, then the UI will show the incorrect (previous) value for a brief period which looks like a UI glitch to the user. After the connection is made, we only
         // update `newValueRef` when `Onyx.connect()` callback is fired.
-        if (isFirstConnectionRef.current || shouldGetCachedValueRef.current) {
+        if (isFirstConnectionRef.current || shouldGetCachedValueRef.current || key !== previousKey) {
             // Gets the value from cache and maps it with selector. It changes `null` to `undefined` for `useOnyx` compatibility.
             const value = OnyxUtils_1.default.tryGetCachedValue(key);
             const selectedValue = memoizedSelector ? memoizedSelector(value) : value;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-onyx",
-  "version": "3.0.29",
+  "version": "3.0.31",
   "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;