[WIP] Remove dependencies argument from useOnyx

lib/createMemoizedSelector.ts

@@ -0,0 +1,38 @@
+import {deepEqual} from 'fast-equals';
+
+/**
+ * Wraps a selector function so that:
+ * - Calling the wrapper with the same input reference twice short-circuits to the cached output
+ *   (cheap `===` check, no recompute).
+ * - Calling with a different input that produces a deep-equal output returns the *previous*
+ *   output reference, so downstream `===` comparisons treat it as unchanged.
+ *
+ * This is the minimum needed for `useSyncExternalStore` to not loop when consumers pass
+ * inline selectors that allocate fresh objects on every call (e.g. `(e) => ({id: e?.id})`):
+ * without the deep-equal fallback, every `getSnapshot` would return a new reference and React
+ * would re-render (or throw "getSnapshot should be cached") indefinitely.
+ *
+ * Stateful by design — each call to `createMemoizedSelector` produces an independent wrapper
+ * with its own `lastInput`/`lastOutput` cache, so a wrapper must not be shared across
+ * subscriptions that can see different inputs.
+ */
+function createMemoizedSelector<TInput, TOutput>(selector: (input: TInput) => TOutput): (input: TInput) => TOutput {
+    let lastInput: TInput;
+    let lastOutput: TOutput;
+    let hasComputed = false;
+
+    return (input) => {
+        if (hasComputed && lastInput === input) {
+            return lastOutput;
+        }
+        const next = selector(input);
+        lastInput = input;
+        if (!hasComputed || !deepEqual(lastOutput, next)) {
+            lastOutput = next;
+            hasComputed = true;
+        }
+        return lastOutput;
+    };
+}
+
+export default createMemoizedSelector;

lib/useOnyx.ts

@@ -1,14 +1,13 @@
-import {deepEqual, shallowEqual} from 'fast-equals';
+import {shallowEqual} from 'fast-equals';
 import {useCallback, useEffect, useMemo, useRef, useSyncExternalStore} from 'react';
-import type {DependencyList} from 'react';
+import createMemoizedSelector from './createMemoizedSelector';
 import OnyxCache, {TASK} from './OnyxCache';
 import type {Connection} from './OnyxConnectionManager';
 import connectionManager from './OnyxConnectionManager';
 import OnyxUtils from './OnyxUtils';
 import OnyxKeys from './OnyxKeys';
 import type {CollectionKeyBase, OnyxKey, OnyxValue} from './types';
 import onyxSnapshotCache from './OnyxSnapshotCache';
-import useLiveRef from './useLiveRef';
 
 type UseOnyxSelector<TKey extends OnyxKey, TReturnValue = OnyxValue<TKey>> = (data: OnyxValue<TKey> | undefined) => TReturnValue;
 
@@ -38,49 +37,19 @@ type ResultMetadata<TValue> = {
 
 type UseOnyxResult<TValue> = [NonNullable<TValue> | undefined, ResultMetadata<TValue>];
 
-function useOnyx<TKey extends OnyxKey, TReturnValue = OnyxValue<TKey>>(
-    key: TKey,
-    options?: UseOnyxOptions<TKey, TReturnValue>,
-    dependencies: DependencyList = [],
-): UseOnyxResult<TReturnValue> {
+function useOnyx<TKey extends OnyxKey, TReturnValue = OnyxValue<TKey>>(key: TKey, options?: UseOnyxOptions<TKey, TReturnValue>): UseOnyxResult<TReturnValue> {
     const connectionRef = useRef<Connection | null>(null);
-    const currentDependenciesRef = useLiveRef(dependencies);
     const selector = options?.selector;
 
-    // Create memoized version of selector for performance
+    // Create memoized version of selector for performance. It caches by input reference
+    // with a deepEqual fallback on the output to keep the returned reference stable.
     const memoizedSelector = useMemo((): UseOnyxSelector<TKey, TReturnValue> | null => {
         if (!selector) {
             return null;
         }
 
-        let lastInput: OnyxValue<TKey> | undefined;
-        let lastOutput: TReturnValue;
-        let lastDependencies: DependencyList = [];
-        let hasComputed = false;
-
-        return (input: OnyxValue<TKey> | undefined): TReturnValue => {
-            const currentDependencies = currentDependenciesRef.current;
-
-            // Recompute if input changed, dependencies changed, or first time
-            const dependenciesChanged = !shallowEqual(lastDependencies, currentDependencies);
-            if (!hasComputed || lastInput !== input || dependenciesChanged) {
-                const newOutput = selector(input);
-
-                // Always track the current input to avoid re-running the selector
-                // when the same input is seen again (even if the output didn't change).
-                lastInput = input;
-
-                // Only update the output reference if it actually changed
-                if (!hasComputed || !deepEqual(lastOutput, newOutput) || dependenciesChanged) {
-                    lastOutput = newOutput;
-                    lastDependencies = [...currentDependencies];
-                    hasComputed = true;
-                }
-            }
-
-            return lastOutput;
-        };
-    }, [currentDependenciesRef, selector]);
+        return createMemoizedSelector(selector);
+    }, [selector]);
 
     // Stores the previous cached value as it's necessary to compare with the new value in `getSnapshot()`.
     // We initialize it to `null` to simulate that we don't have any value from cache yet.
@@ -132,33 +101,6 @@ function useOnyx<TKey extends OnyxKey, TReturnValue = OnyxValue<TKey>>(
 
     useEffect(() => () => onyxSnapshotCache.deregisterConsumer(key, cacheKey), [key, cacheKey]);
 
-    // Track previous dependencies to prevent infinite loops
-    const previousDependenciesRef = useRef<DependencyList>([]);
-
-    useEffect(() => {
-        // This effect will only run if the `dependencies` array changes. If it changes it will force the hook
-        // to trigger a `getSnapshot()` update by calling the stored `onStoreChange()` function reference, thus
-        // re-running the hook and returning the latest value to the consumer.
-
-        // Deep equality check to prevent infinite loops when dependencies array reference changes
-        // but content remains the same
-        if (shallowEqual(previousDependenciesRef.current, dependencies)) {
-            return;
-        }
-
-        previousDependenciesRef.current = dependencies;
-
-        if (connectionRef.current === null || isConnectingRef.current || connectedKeyRef.current !== key || !onStoreChangeFnRef.current) {
-            return;
-        }
-
-        // Invalidate cache when dependencies change so selector runs with new closure values
-        onyxSnapshotCache.invalidateForKey(key);
-        shouldGetCachedValueRef.current = true;
-        onStoreChangeFnRef.current();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [...dependencies]);
-
     // Tracks the last memoizedSelector reference that getSnapshot() has computed with.
     // When the selector changes, this mismatch forces getSnapshot() to re-evaluate
     // even if all other conditions (isFirstConnection, shouldGetCachedValue, key) are false.

tests/unit/createMemoizedSelectorTest.ts

@@ -0,0 +1,129 @@
+import createMemoizedSelector from '../../lib/createMemoizedSelector';
+
+describe('createMemoizedSelector', () => {
+    it('computes the output on the first call', () => {
+        const selector = jest.fn((input: number) => input * 2);
+        const memoized = createMemoizedSelector(selector);
+
+        expect(memoized(21)).toBe(42);
+        expect(selector).toHaveBeenCalledTimes(1);
+    });
+
+    it('short-circuits without recomputing when called with the same input reference', () => {
+        const input = {value: 1};
+        const selector = jest.fn((data: {value: number}) => ({doubled: data.value * 2}));
+        const memoized = createMemoizedSelector(selector);
+
+        const first = memoized(input);
+        const second = memoized(input);
+
+        // Same input reference → selector not called again, same output reference returned.
+        expect(selector).toHaveBeenCalledTimes(1);
+        expect(second).toBe(first);
+    });
+
+    it('recomputes when the input reference changes', () => {
+        const selector = jest.fn((data: {value: number}) => data.value * 10);
+        const memoized = createMemoizedSelector(selector);
+
+        expect(memoized({value: 1})).toBe(10);
+        expect(memoized({value: 2})).toBe(20);
+        expect(selector).toHaveBeenCalledTimes(2);
+    });
+
+    it('returns the previous output reference when a new input produces a deep-equal output', () => {
+        // New object input every call, but the selector output is structurally identical.
+        const selector = (data: {id: number; name: string}) => ({id: data.id});
+        const memoized = createMemoizedSelector(selector);
+
+        const first = memoized({id: 1, name: 'a'});
+        const second = memoized({id: 1, name: 'b'}); // different input, deep-equal output {id: 1}
+
+        // Output is deep-equal, so the *previous* reference is preserved for `===` consumers.
+        expect(second).toBe(first);
+        expect(second).toEqual({id: 1});
+    });
+
+    it('returns a new output reference when a new input produces a deep-unequal output', () => {
+        const selector = (data: {id: number}) => ({id: data.id});
+        const memoized = createMemoizedSelector(selector);
+
+        const first = memoized({id: 1});
+        const second = memoized({id: 2});
+
+        expect(second).not.toBe(first);
+        expect(second).toEqual({id: 2});
+    });
+
+    it('preserves the output reference across an A → B(deep-equal A) → A sequence', () => {
+        const selector = (data: {id: number; extra: string}) => ({id: data.id});
+        const memoized = createMemoizedSelector(selector);
+
+        const a = memoized({id: 1, extra: 'x'});
+        const b = memoized({id: 1, extra: 'y'}); // deep-equal output, keeps `a`
+        const c = memoized({id: 1, extra: 'z'}); // deep-equal output, keeps `a`
+
+        expect(b).toBe(a);
+        expect(c).toBe(a);
+    });
+
+    it('handles primitive outputs', () => {
+        const selector = jest.fn((data: {n: number}) => data.n > 0);
+        const memoized = createMemoizedSelector(selector);
+
+        expect(memoized({n: 1})).toBe(true);
+        // Different input, same boolean output — deepEqual(true, true) is true, value preserved.
+        expect(memoized({n: 5})).toBe(true);
+        expect(memoized({n: -1})).toBe(false);
+        expect(selector).toHaveBeenCalledTimes(3);
+    });
+
+    it('handles undefined input and undefined output', () => {
+        const selector = jest.fn((data: {x: number} | undefined) => data?.x);
+        const memoized = createMemoizedSelector(selector);
+
+        expect(memoized(undefined)).toBeUndefined();
+        // Same undefined input reference → short-circuits.
+        expect(memoized(undefined)).toBeUndefined();
+        expect(selector).toHaveBeenCalledTimes(1);
+    });
+
+    it('treats the first call as a real computation even when the output is undefined', () => {
+        const selector = jest.fn(() => undefined);
+        const memoized = createMemoizedSelector(selector);
+
+        const input1 = {a: 1};
+        const input2 = {a: 2};
+
+        expect(memoized(input1)).toBeUndefined();
+        expect(memoized(input2)).toBeUndefined();
+        // Both inputs differ by reference, but both outputs are undefined (deep-equal) — recomputed
+        // on the second call, then collapsed to the preserved reference (both undefined anyway).
+        expect(selector).toHaveBeenCalledTimes(2);
+    });
+
+    it('keeps independent caches per wrapper instance', () => {
+        const selectorA = jest.fn((n: number) => n + 1);
+        const selectorB = jest.fn((n: number) => n + 100);
+        const memoizedA = createMemoizedSelector(selectorA);
+        const memoizedB = createMemoizedSelector(selectorB);
+
+        expect(memoizedA(1)).toBe(2);
+        expect(memoizedB(1)).toBe(101);
+        expect(selectorA).toHaveBeenCalledTimes(1);
+        expect(selectorB).toHaveBeenCalledTimes(1);
+    });
+
+    it('preserves nested object reference identity on deep-equal recompute', () => {
+        const selector = (data: {id: number}) => ({meta: {id: data.id}, items: [data.id]});
+        const memoized = createMemoizedSelector(selector);
+
+        const first = memoized({id: 7});
+        const second = memoized({id: 7}); // new input ref, deep-equal output
+
+        // Whole output reference preserved, so nested members are reference-stable too.
+        expect(second).toBe(first);
+        expect(second.meta).toBe(first.meta);
+        expect(second.items).toBe(first.items);
+    });
+});