Merge pull request Expensify#701 from Expensify/Rory-RemoveUseLiveRef

Remove useLiveRef

Author: carlosmiceli

lib/useLiveRef.ts

@@ -3,6 +3,9 @@ import {useRef} from 'react';
 /**
  * Creates a mutable reference to a value, useful when you need to
  * maintain a reference to a value that may change over time without triggering re-renders.
+ *
+ * @deprecated This hook breaks the Rules of React, and should not be used.
+ * The migration effort to remove it safely is not currently planned.
  */
 function useLiveRef<T>(value: T) {
     const ref = useRef<T>(value);

lib/useOnyx.ts

@@ -78,11 +78,13 @@ function useOnyx<TKey extends OnyxKey, TReturnValue = OnyxValue<TKey>>(
     const previousKey = usePrevious(key);
 
     const currentDependenciesRef = useLiveRef(dependencies);
-    const currentSelectorRef = useLiveRef(options?.selector);
+    const selector = options?.selector;
 
     // Create memoized version of selector for performance
     const memoizedSelector = useMemo(() => {
-        if (!options?.selector) return null;
+        if (!selector) {
+            return null;
+        }
 
         let lastInput: OnyxValue<TKey> | undefined;
         let lastOutput: TReturnValue;
@@ -91,14 +93,13 @@ function useOnyx<TKey extends OnyxKey, TReturnValue = OnyxValue<TKey>>(
 
         return (input: OnyxValue<TKey> | undefined): TReturnValue => {
             const currentDependencies = currentDependenciesRef.current;
-            const currentSelector = currentSelectorRef.current;
 
             // Recompute if input changed, dependencies changed, or first time
             const dependenciesChanged = !shallowEqual(lastDependencies, currentDependencies);
             if (!hasComputed || lastInput !== input || dependenciesChanged) {
                 // Only proceed if we have a valid selector
-                if (currentSelector) {
-                    const newOutput = currentSelector(input);
+                if (selector) {
+                    const newOutput = selector(input);
 
                     // Deep equality mode: only update if output actually changed
                     if (!hasComputed || !deepEqual(lastOutput, newOutput) || dependenciesChanged) {
@@ -112,7 +113,7 @@ function useOnyx<TKey extends OnyxKey, TReturnValue = OnyxValue<TKey>>(
 
             return lastOutput;
         };
-    }, [currentDependenciesRef, currentSelectorRef, options?.selector]);
+    }, [currentDependenciesRef, 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.

tests/unit/useOnyxTest.ts

@@ -409,7 +409,6 @@ describe('useOnyx', () => {
             expect(result.current[1].status).toEqual('loaded');
 
             selector = (entry: OnyxEntry<{id: string; name: string}>) => `id - ${entry?.id}, name - ${entry?.name} - selector changed`;
-            // In a react app we expect the selector ref to change during a rerender (see selectorRef/useLiveRef)
             rerender(undefined);
 
             expect(result.current[0]).toEqual('id - test_id, name - test_name - selector changed');