Merge pull request #607 from callstack-internal/feat/useonyx-metrics

feat: decorate useOnyx.getSnapshot with performance metrics

lib/metrics.ts

@@ -1,7 +1,5 @@
 import PerformanceProxy from './dependencies/PerformanceProxy';
 
-const decoratedAliases = new Set();
-
 /**
  * Capture a measurement between the start mark and now
  */
@@ -21,11 +19,6 @@ function isPromiseLike(value: unknown): value is Promise<unknown> {
  * Wraps a function with metrics capturing logic
  */
 function decorateWithMetrics<Args extends unknown[], ReturnType>(func: (...args: Args) => ReturnType, alias = func.name) {
-    if (decoratedAliases.has(alias)) {
-        throw new Error(`"${alias}" is already decorated`);
-    }
-
-    decoratedAliases.add(alias);
     function decorated(...args: Args) {
         const mark = PerformanceProxy.mark(alias, {detail: {args, alias}});
 

lib/useOnyx.ts

@@ -1,13 +1,15 @@
 import {deepEqual, shallowEqual} from 'fast-equals';
-import {useCallback, useEffect, useRef, useSyncExternalStore} from 'react';
+import {useCallback, useEffect, useMemo, useRef, useSyncExternalStore} from 'react';
 import type {DependencyList} from 'react';
 import OnyxCache, {TASK} from './OnyxCache';
 import type {Connection} from './OnyxConnectionManager';
 import connectionManager from './OnyxConnectionManager';
 import OnyxUtils from './OnyxUtils';
+import * as GlobalSettings from './GlobalSettings';
 import type {CollectionKeyBase, KeyValueMapping, OnyxCollection, OnyxKey, OnyxValue} from './types';
 import useLiveRef from './useLiveRef';
 import usePrevious from './usePrevious';
+import decorateWithMetrics from './metrics';
 
 type BaseUseOnyxOptions = {
     /**
@@ -321,11 +323,19 @@ function useOnyx<TKey extends OnyxKey, TReturnValue = OnyxValue<TKey>>(
         [key, options?.initWithStoredValues, options?.reuseConnection, checkEvictableKey],
     );
 
+    const getSnapshotDecorated = useMemo(() => {
+        if (!GlobalSettings.isPerformanceMetricsEnabled()) {
+            return getSnapshot;
+        }
+
+        return decorateWithMetrics(getSnapshot, 'useOnyx.getSnapshot');
+    }, [getSnapshot]);
+
     useEffect(() => {
         checkEvictableKey();
     }, [checkEvictableKey]);
 
-    const result = useSyncExternalStore<UseOnyxResult<TReturnValue>>(subscribe, getSnapshot);
+    const result = useSyncExternalStore<UseOnyxResult<TReturnValue>>(subscribe, getSnapshotDecorated);
 
     return result;
 }