react-native-onyx 3.0.57 → 3.0.59

package/dist/useOnyx.js

@@ -42,12 +42,10 @@ const OnyxCache_1 = __importStar(require("./OnyxCache"));
 const OnyxConnectionManager_1 = __importDefault(require("./OnyxConnectionManager"));
 const OnyxUtils_1 = __importDefault(require("./OnyxUtils"));
 const OnyxKeys_1 = __importDefault(require("./OnyxKeys"));
-const usePrevious_1 = __importDefault(require("./usePrevious"));
 const OnyxSnapshotCache_1 = __importDefault(require("./OnyxSnapshotCache"));
 const useLiveRef_1 = __importDefault(require("./useLiveRef"));
 function useOnyx(key, options, dependencies = []) {
     const connectionRef = (0, react_1.useRef)(null);
-    const previousKey = (0, usePrevious_1.default)(key);
     const currentDependenciesRef = (0, useLiveRef_1.default)(dependencies);
     const selector = options === null || options === void 0 ? void 0 : options.selector;
     // Create memoized version of selector for performance
@@ -93,9 +91,12 @@ function useOnyx(key, options, dependencies = []) {
             status: (options === null || options === void 0 ? void 0 : options.initWithStoredValues) === false ? 'loaded' : 'loading',
         },
     ]);
-    // Indicates if it's the first Onyx connection of this hook or not, as we don't want certain use cases
-    // in `getSnapshot()` to be satisfied several times.
-    const isFirstConnectionRef = (0, react_1.useRef)(true);
+    // Tracks which key has completed its first Onyx connection callback. When this doesn't match the
+    // current key, getSnapshot() treats the hook as being in its "first connection" state for that key.
+    // This is key-aware by design: when the key changes, connectedKeyRef still holds the old key (or null
+    // after cleanup), so the hook automatically enters first-connection mode for the new key without any
+    // explicit reset logic — eliminating the race condition where cleanup could clobber a boolean flag.
+    const connectedKeyRef = (0, react_1.useRef)(null);
     // Indicates if the hook is connecting to an Onyx key.
     const isConnectingRef = (0, react_1.useRef)(false);
     // Stores the `onStoreChange()` function, which can be used to trigger a `getSnapshot()` update when desired.
@@ -122,7 +123,7 @@ function useOnyx(key, options, dependencies = []) {
             return;
         }
         previousDependenciesRef.current = dependencies;
-        if (connectionRef.current === null || isConnectingRef.current || !onStoreChangeFnRef.current) {
+        if (connectionRef.current === null || isConnectingRef.current || connectedKeyRef.current !== key || !onStoreChangeFnRef.current) {
             return;
         }
         // Invalidate cache when dependencies change so selector runs with new closure values
@@ -154,7 +155,8 @@ function useOnyx(key, options, dependencies = []) {
         // Check if we have any cache for this Onyx key
         // Don't use cache for first connection with initWithStoredValues: false
         // Also don't use cache during active data updates (when shouldGetCachedValueRef is true)
-        if (!(isFirstConnectionRef.current && (options === null || options === void 0 ? void 0 : options.initWithStoredValues) === false) && !shouldGetCachedValueRef.current) {
+        const isFirstConnection = connectedKeyRef.current !== key;
+        if (!(isFirstConnection && (options === null || options === void 0 ? void 0 : options.initWithStoredValues) === false) && !shouldGetCachedValueRef.current) {
             const cachedResult = OnyxSnapshotCache_1.default.getCachedResult(key, cacheKey);
             if (cachedResult !== undefined) {
                 resultRef.current = cachedResult;
@@ -162,7 +164,7 @@ function useOnyx(key, options, dependencies = []) {
             }
         }
         // We return the initial result right away during the first connection if `initWithStoredValues` is set to `false`.
-        if (isFirstConnectionRef.current && (options === null || options === void 0 ? void 0 : options.initWithStoredValues) === false) {
+        if (isFirstConnection && (options === null || options === void 0 ? void 0 : options.initWithStoredValues) === false) {
             const result = resultRef.current;
             // Store result in snapshot cache
             OnyxSnapshotCache_1.default.setCachedResult(key, cacheKey, result);
@@ -172,7 +174,7 @@ function useOnyx(key, options, dependencies = []) {
         // 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.
         const hasSelectorChanged = lastComputedSelectorRef.current !== memoizedSelector;
-        if (isFirstConnectionRef.current || shouldGetCachedValueRef.current || key !== previousKey || hasSelectorChanged) {
+        if (isFirstConnection || shouldGetCachedValueRef.current || hasSelectorChanged) {
             // 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;
@@ -187,7 +189,7 @@ function useOnyx(key, options, dependencies = []) {
         let newFetchStatus;
         // If we have pending merge operations for the key during the first connection, we set the new value to `undefined`
         // and fetch status to `loading` to simulate that it is still being loaded until we have the most updated data.
-        if (isFirstConnectionRef.current && OnyxUtils_1.default.hasPendingMergeForKey(key)) {
+        if (isFirstConnection && OnyxUtils_1.default.hasPendingMergeForKey(key)) {
             newValueRef.current = undefined;
             newFetchStatus = 'loading';
         }
@@ -211,7 +213,7 @@ function useOnyx(key, options, dependencies = []) {
         //   OR we have a pending `Onyx.clear()` task (if `Onyx.clear()` is running cache might not be available anymore
         //   OR the subscriber is triggered (the value is gotten from the storage)
         //   so we update the cached value/result right away in order to prevent infinite loading state issues).
-        const shouldUpdateResult = !areValuesEqual || (previousValueRef.current === null && (hasCacheForKey || OnyxCache_1.default.hasPendingTask(OnyxCache_1.TASK.CLEAR) || !isFirstConnectionRef.current));
+        const shouldUpdateResult = !areValuesEqual || (previousValueRef.current === null && (hasCacheForKey || OnyxCache_1.default.hasPendingTask(OnyxCache_1.TASK.CLEAR) || !isFirstConnection));
         if (shouldUpdateResult) {
             previousValueRef.current = newValueRef.current;
             // If the new value is `null` we default it to `undefined` to ensure the consumer gets a consistent result from the hook.
@@ -228,8 +230,15 @@ 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, key, memoizedSelector, cacheKey, previousKey]);
+    }, [options === null || options === void 0 ? void 0 : options.initWithStoredValues, key, memoizedSelector, cacheKey]);
     const subscribe = (0, react_1.useCallback)((onStoreChange) => {
+        // Reset internal state so the hook properly transitions through loading
+        // for the new key instead of preserving stale state from the previous one.
+        previousValueRef.current = null;
+        newValueRef.current = null;
+        shouldGetCachedValueRef.current = true;
+        sourceValueRef.current = undefined;
+        resultRef.current = [undefined, { status: (options === null || options === void 0 ? void 0 : options.initWithStoredValues) === false ? 'loaded' : 'loading' }];
         isConnectingRef.current = true;
         onStoreChangeFnRef.current = onStoreChange;
         connectionRef.current = OnyxConnectionManager_1.default.connect({
@@ -237,9 +246,9 @@ function useOnyx(key, options, dependencies = []) {
             callback: (value, callbackKey, sourceValue) => {
                 isConnectingRef.current = false;
                 onStoreChangeFnRef.current = onStoreChange;
-                // Signals that the first connection was made, so some logics in `getSnapshot()`
-                // won't be executed anymore.
-                isFirstConnectionRef.current = false;
+                // Signals that the first connection was made for this key, so some logics
+                // in `getSnapshot()` won't be executed anymore.
+                connectedKeyRef.current = key;
                 // Signals that we want to get the newest cached value again in `getSnapshot()`.
                 shouldGetCachedValueRef.current = true;
                 // sourceValue is unknown type, so we need to cast it to the correct type.
@@ -259,7 +268,7 @@ function useOnyx(key, options, dependencies = []) {
                 return;
             }
             OnyxConnectionManager_1.default.disconnect(connectionRef.current);
-            isFirstConnectionRef.current = false;
+            connectedKeyRef.current = null;
             isConnectingRef.current = false;
             onStoreChangeFnRef.current = null;
         };

package/dist/utils.d.ts

@@ -37,7 +37,7 @@ type FastMergeResult<TValue> = {
 declare function fastMerge<TValue>(target: TValue, source: TValue, options?: FastMergeOptions, metadata?: FastMergeMetadata, basePath?: string[]): FastMergeResult<TValue>;
 /** Checks whether the given object is an object and not null/undefined. */
 declare function isEmptyObject<T>(obj: T | EmptyValue): obj is EmptyValue;
-/** Deep removes the nested null values from the given value. */
+/** Deep removes the nested null values from the given value. Returns the original reference if no nulls were found. */
 declare function removeNestedNullValues<TValue extends OnyxInput<OnyxKey> | null>(value: TValue): TValue;
 /** Formats the action name by uppercasing and adding the key if provided. */
 declare function formatActionName(method: string, key?: OnyxKey): string;

package/dist/utils.js

@@ -39,6 +39,9 @@ function fastMerge(target, source, options, metadata, basePath = []) {
 function mergeObject(target, source, options, metadata, basePath) {
     const destination = {};
     const targetObject = isMergeableObject(target) ? target : undefined;
+    // Track whether the merge actually changed anything compared to target.
+    // If nothing changed, we return the original target reference for reference stability.
+    let hasChanged = !targetObject;
     // First we want to copy over all keys from the target into the destination object,
     // in case "target" is a mergable object.
     // If "shouldRemoveNestedNulls" is true, we want to remove null values from the merged object
@@ -51,6 +54,7 @@ function mergeObject(target, source, options, metadata, basePath) {
             // If either the source or target value is null, we want to omit the key from the merged object.
             const shouldOmitNullishProperty = options.shouldRemoveNestedNulls && (targetProperty === null || sourceProperty === null);
             if (targetProperty === undefined || shouldOmitNullishProperty) {
+                hasChanged = true;
                 continue;
             }
             destination[key] = targetProperty;
@@ -68,6 +72,9 @@ function mergeObject(target, source, options, metadata, basePath) {
         }
         // If the source value is not a mergable object, we need to set the key directly.
         if (!isMergeableObject(sourceProperty)) {
+            if (destination[key] !== sourceProperty) {
+                hasChanged = true;
+            }
             destination[key] = sourceProperty;
             continue;
         }
@@ -76,6 +83,7 @@ function mergeObject(target, source, options, metadata, basePath) {
         // To achieve this, we first mark these nested objects with an internal flag.
         // When calling fastMerge again with "mark" removal mode, the marked objects will be removed.
         if (options.objectRemovalMode === 'mark' && targetProperty === null) {
+            hasChanged = true;
             targetProperty = { [ONYX_INTERNALS__REPLACE_OBJECT_MARK]: true };
             metadata.replaceNullPatches.push([[...basePath, key], Object.assign({}, sourceProperty)]);
         }
@@ -83,6 +91,7 @@ function mergeObject(target, source, options, metadata, basePath) {
         // has the internal flag set, we replace the entire destination object with the source one and remove
         // the flag.
         if (options.objectRemovalMode === 'replace' && sourceProperty[ONYX_INTERNALS__REPLACE_OBJECT_MARK]) {
+            hasChanged = true;
             // We do a spread here in order to have a new object reference and allow us to delete the internal flag
             // of the merged object only.
             const sourcePropertyWithoutMark = Object.assign({}, sourceProperty);
@@ -90,9 +99,13 @@ function mergeObject(target, source, options, metadata, basePath) {
             destination[key] = sourcePropertyWithoutMark;
             continue;
         }
-        destination[key] = fastMerge(targetProperty, sourceProperty, options, metadata, [...basePath, key]).result;
+        const merged = fastMerge(targetProperty, sourceProperty, options, metadata, [...basePath, key]).result;
+        if (merged !== targetProperty) {
+            hasChanged = true;
+        }
+        destination[key] = merged;
     }
-    return destination;
+    return hasChanged ? destination : targetObject;
 }
 /** Checks whether the given object is an object and not null/undefined. */
 function isEmptyObject(obj) {
@@ -106,30 +119,32 @@ function isMergeableObject(value) {
     const isNonNullObject = value != null ? typeof value === 'object' : false;
     return isNonNullObject && !(value instanceof RegExp) && !(value instanceof Date) && !Array.isArray(value);
 }
-/** Deep removes the nested null values from the given value. */
+/** Deep removes the nested null values from the given value. Returns the original reference if no nulls were found. */
 function removeNestedNullValues(value) {
-    if (value === null || value === undefined || typeof value !== 'object') {
+    if (value === null || value === undefined || typeof value !== 'object' || Array.isArray(value)) {
         return value;
     }
-    if (Array.isArray(value)) {
-        return [...value];
-    }
+    let hasChanged = false;
     const result = {};
     // eslint-disable-next-line no-restricted-syntax, guard-for-in
     for (const key in value) {
         const propertyValue = value[key];
         if (propertyValue === null || propertyValue === undefined) {
+            hasChanged = true;
             continue;
         }
         if (typeof propertyValue === 'object' && !Array.isArray(propertyValue)) {
-            const valueWithoutNestedNulls = removeNestedNullValues(propertyValue);
-            result[key] = valueWithoutNestedNulls;
+            const cleaned = removeNestedNullValues(propertyValue);
+            if (cleaned !== propertyValue) {
+                hasChanged = true;
+            }
+            result[key] = cleaned;
         }
         else {
             result[key] = propertyValue;
         }
     }
-    return result;
+    return hasChanged ? result : value;
 }
 /** Formats the action name by uppercasing and adding the key if provided. */
 function formatActionName(method, key) {

package/package.json

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

package/dist/usePrevious.d.ts

@@ -1,5 +0,0 @@
-/**
- * Returns the previous value of the provided value.
- */
-declare function usePrevious<T>(value: T): T;
-export default usePrevious;

package/dist/usePrevious.js

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = require("react");
-/**
- * Returns the previous value of the provided value.
- */
-function usePrevious(value) {
-    const ref = (0, react_1.useRef)(value);
-    (0, react_1.useEffect)(() => {
-        ref.current = value;
-    }, [value]);
-    return ref.current;
-}
-exports.default = usePrevious;