apply additional improvements, add more tests

Author: JKobrynski

lib/useOnyx.ts

@@ -7,7 +7,6 @@ import connectionManager from './OnyxConnectionManager';
 import OnyxUtils from './OnyxUtils';
 import * as GlobalSettings from './GlobalSettings';
 import type {CollectionKeyBase, OnyxKey, OnyxValue} from './types';
-import usePrevious from './usePrevious';
 import decorateWithMetrics from './metrics';
 import onyxSnapshotCache from './OnyxSnapshotCache';
 import useLiveRef from './useLiveRef';
@@ -57,8 +56,6 @@ function useOnyx<TKey extends OnyxKey, TReturnValue = OnyxValue<TKey>>(
     dependencies: DependencyList = [],
 ): UseOnyxResult<TReturnValue> {
     const connectionRef = useRef<Connection | null>(null);
-    const previousKey = usePrevious(key);
-
     const currentDependenciesRef = useLiveRef(dependencies);
     const selector = options?.selector;
 
@@ -219,7 +216,7 @@ function useOnyx<TKey extends OnyxKey, TReturnValue = OnyxValue<TKey>>(
         // 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 (isFirstConnection || 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.tryGetCachedValue(key) as OnyxValue<TKey>;
             const selectedValue = memoizedSelector ? memoizedSelector(value) : value;
@@ -283,7 +280,7 @@ function useOnyx<TKey extends OnyxKey, TReturnValue = OnyxValue<TKey>>(
         }
 
         return resultRef.current;
-    }, [options?.initWithStoredValues, key, memoizedSelector, cacheKey, previousKey]);
+    }, [options?.initWithStoredValues, key, memoizedSelector, cacheKey]);
 
     const subscribe = useCallback(
         (onStoreChange: () => void) => {

tests/unit/useOnyxTest.ts

@@ -117,6 +117,69 @@ describe('useOnyx', () => {
             expect(result.current[0]).toBeUndefined();
             expect(result.current[1].status).toEqual('loaded');
         });
+
+        it('should return the new value when switching from a key with data to another key with different data', async () => {
+            Onyx.set(`${ONYXKEYS.COLLECTION.TEST_KEY}1`, 'value_one');
+            Onyx.set(`${ONYXKEYS.COLLECTION.TEST_KEY}2`, 'value_two');
+
+            const {result, rerender} = renderHook((key: string) => useOnyx(key), {initialProps: `${ONYXKEYS.COLLECTION.TEST_KEY}1` as string});
+
+            await act(async () => waitForPromisesToResolve());
+
+            expect(result.current[0]).toEqual('value_one');
+            expect(result.current[1].status).toEqual('loaded');
+
+            // Switch to another key that also has data
+            rerender(`${ONYXKEYS.COLLECTION.TEST_KEY}2`);
+
+            await act(async () => waitForPromisesToResolve());
+
+            expect(result.current[0]).toEqual('value_two');
+            expect(result.current[1].status).toEqual('loaded');
+        });
+
+        it('should apply the selector against the new key data when switching keys', async () => {
+            Onyx.set(`${ONYXKEYS.COLLECTION.TEST_KEY}1`, {id: 'entry1_id', name: 'entry1_name'});
+            Onyx.set(`${ONYXKEYS.COLLECTION.TEST_KEY}2`, {id: 'entry2_id', name: 'entry2_name'});
+
+            const selector = ((entry: OnyxEntry<{id: string; name: string}>) => entry?.name) as UseOnyxSelector<OnyxKey, string | undefined>;
+
+            const {result, rerender} = renderHook((key: string) => useOnyx(key, {selector}), {initialProps: `${ONYXKEYS.COLLECTION.TEST_KEY}1` as string});
+
+            await act(async () => waitForPromisesToResolve());
+
+            expect(result.current[0]).toEqual('entry1_name');
+            expect(result.current[1].status).toEqual('loaded');
+
+            // Switch key — selector should run against the new key's data
+            rerender(`${ONYXKEYS.COLLECTION.TEST_KEY}2`);
+
+            await act(async () => waitForPromisesToResolve());
+
+            expect(result.current[0]).toEqual('entry2_name');
+            expect(result.current[1].status).toEqual('loaded');
+        });
+
+        it('should handle rapid key switching and settle on the final key value', async () => {
+            Onyx.set(`${ONYXKEYS.COLLECTION.TEST_KEY}1`, 'value_one');
+            Onyx.set(`${ONYXKEYS.COLLECTION.TEST_KEY}2`, 'value_two');
+            Onyx.set(`${ONYXKEYS.COLLECTION.TEST_KEY}3`, 'value_three');
+
+            const {result, rerender} = renderHook((key: string) => useOnyx(key), {initialProps: `${ONYXKEYS.COLLECTION.TEST_KEY}1` as string});
+
+            await act(async () => waitForPromisesToResolve());
+
+            expect(result.current[0]).toEqual('value_one');
+
+            // Rapidly switch keys without waiting for promises between switches
+            rerender(`${ONYXKEYS.COLLECTION.TEST_KEY}2`);
+            rerender(`${ONYXKEYS.COLLECTION.TEST_KEY}3`);
+
+            await act(async () => waitForPromisesToResolve());
+
+            expect(result.current[0]).toEqual('value_three');
+            expect(result.current[1].status).toEqual('loaded');
+        });
     });
 
     describe('misc', () => {