react-native-onyx 3.0.58 → 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/package.json

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