react-native-inapp-inspector 2.3.18 → 2.3.20

package/src/customHooks/performanceTracker.ts

@@ -1,1014 +0,0 @@
-import {AppColors} from '../styles/AppColors';
-import {t} from '../i18n';
-import {useState, useEffect, useRef, useMemo, useCallback} from 'react';
-
-export interface PerformanceEvent {
-  id: string;
-  timestamp: number;
-  type:
-    | 'fps_drop'
-    | 'slow_render'
-    | 'transition'
-    | 'memory'
-    | 'network'
-    | 'bridge'
-    | 'touch';
-  category: 'render' | 'navigation' | 'memory' | 'io' | 'bridge';
-  fps: number;
-  durationMs: number;
-  droppedFrames?: number;
-  frameTimeMs?: number;
-  frameBudgetPct?: number;
-  bottleneckThread?: 'JS Thread' | 'UI Thread' | 'Bridge' | 'Balanced';
-  screenName?: string;
-  label: string;
-  detail: string;
-  source?: string;
-  breakdown?: {
-    jsTimeMs: number;
-    uiTimeMs: number;
-    bridgeLatencyMs?: number;
-  };
-  heapDeltaKb?: number;
-  advice?: string;
-  severity: 'optimal' | 'warning' | 'critical';
-}
-
-export interface LiveMemoryStats {
-  heapUsedMb: number;
-  heapTotalMb: number;
-  gcCount: number;
-  gcPauseMs: number;
-  allocationRateMbPerSec: number;
-}
-
-export interface CoreMobileVitals {
-  ttiMs: number; // Time to Interactive
-  fcpMs: number; // First Contentful Paint
-  inpMs: number; // Interaction to Next Paint
-  jankPercentage: number;
-  grade: 'Optimal' | 'Fair' | 'Poor';
-}
-
-export interface PerformanceFixKey {
-  keyName: string;
-  title: string;
-  explanation: string;
-  codeSnippet: string;
-  impact: 'High Impact' | 'Medium Impact' | 'Best Practice';
-  impactColor: string;
-}
-
-export interface ComponentRenderProfile {
-  id: string;
-  name: string;
-  type: 'screen' | 'component' | 'list_item' | 'modal';
-  sourceFile: string;
-  renderCount: number;
-  wastefulCount: number;
-  wastefulPercentage: number;
-  avgRenderTimeMs: number;
-  totalRenderTimeMs: number;
-  lastRenderedAt: number;
-  reasons: string[];
-  fixKeys: PerformanceFixKey[];
-  severity: 'optimal' | 'warning' | 'critical';
-}
-
-/**
- * Dynamically generates tailored Before/After performance optimization code snippets
- * based on the target component's real identifier, props, and detected anti-pattern.
- */
-export const generateFixSnippet = (
-  fixKey: string,
-  componentName: string = 'Component',
-  context?: {
-    propName?: string;
-    actionName?: string;
-    itemHeight?: number;
-  },
-): PerformanceFixKey => {
-  const comp = componentName || 'Component';
-  const prop = context?.propName || 'onPress';
-  const action = context?.actionName || 'handlePress';
-  const itemHeight = context?.itemHeight || 72;
-
-  switch (fixKey) {
-    case 'useCallback':
-      return {
-        keyName: 'useCallback',
-        title: t('performance.fixUseCallbackTitle'),
-        explanation: t('performance.fixUseCallbackDesc'),
-        codeSnippet: `${t('performance.beforeUseCallback', {comp})}\n<Button ${prop}={() => ${action}(item.id)} />\n\n${t('performance.afterUseCallback')}\nconst ${action}Memo = useCallback(() => {\n  ${action}(item.id);\n}, [item.id]);\n<Button ${prop}={${action}Memo} />`,
-        impact: t('performance.highImpact') as any,
-        impactColor: AppColors.pink500,
-      };
-
-    case 'createSelector':
-    case 'useMemo':
-      return {
-        keyName: 'createSelector',
-        title: t('performance.fixCreateSelectorTitle'),
-        explanation: t('performance.fixCreateSelectorDesc'),
-        codeSnippet: `${t('performance.beforeCreateSelector', {comp})}\nconst { items, total } = useSelector(state => ({\n  items: state.cart.items,\n  total: state.cart.total,\n}));\n\n${t('performance.afterCreateSelector')}\nimport { shallowEqual } from 'react-redux';\nconst { items, total } = useSelector(\n  state => ({ items: state.cart.items, total: state.cart.total }),\n  shallowEqual\n);`,
-        impact: t('performance.highImpact') as any,
-        impactColor: AppColors.pink500,
-      };
-
-    case 'memo':
-    case 'React.memo':
-      return {
-        keyName: 'memo',
-        title: t('performance.fixReactMemoTitle'),
-        explanation: t('performance.fixReactMemoDesc'),
-        codeSnippet: `${t('performance.beforeMemo', {comp})}\nexport const ${comp} = (props: ${comp}Props) => {\n  return <View>...</View>;\n};\n\n${t('performance.afterMemo')}\nexport const ${comp} = React.memo((props: ${comp}Props) => {\n  return <View>...</View>;\n}, (prev, next) => prev.id === next.id && prev.updatedAt === next.updatedAt);`,
-        impact: t('performance.highImpact') as any,
-        impactColor: AppColors.pink500,
-      };
-
-    case 'getItemLayout':
-      return {
-        keyName: 'getItemLayout',
-        title: t('performance.fixGetItemLayoutTitle'),
-        explanation: t('performance.fixGetItemLayoutDesc'),
-        codeSnippet: `${t('performance.flatListOptimization', {comp})}\nconst ITEM_HEIGHT = ${itemHeight};\nconst getItemLayout = useCallback((_data: any, index: number) => ({\n  length: ITEM_HEIGHT,\n  offset: ITEM_HEIGHT * index,\n  index,\n}), []);\n\n<FlatList\n  data={items}\n  getItemLayout={getItemLayout}\n  renderItem={({item}) => <${comp} item={item} />}\n  keyExtractor={item => String(item.id)}\n/>`,
-        impact: t('performance.highImpact') as any,
-        impactColor: AppColors.pink500,
-      };
-
-    case 'customComparator':
-      return {
-        keyName: 'customComparator',
-        title: t('performance.fixCustomComparatorTitle'),
-        explanation: t('performance.fixCustomComparatorDesc'),
-        codeSnippet: `${t('performance.customComparator', {comp})}\nexport const ${comp} = React.memo(\n  ${comp}Component,\n  (prevProps, nextProps) => {\n    return prevProps.id === nextProps.id && prevProps.status === nextProps.status;\n  }\n);`,
-        impact: t('performance.mediumImpact') as any,
-        impactColor: AppColors.amber500,
-      };
-
-    case 'DebouncedInput':
-      return {
-        keyName: 'DebouncedInput',
-        title: t('performance.fixDebouncedInputTitle'),
-        explanation: t('performance.fixDebouncedInputDesc'),
-        codeSnippet: `${t('performance.debounceInput', {comp})}\nconst [localText, setLocalText] = useState('');\nconst debouncedSearch = useMemo(\n  () => debounce((query: string) => onSearch(query), 250),\n  [onSearch]\n);`,
-        impact: t('performance.highImpact') as any,
-        impactColor: AppColors.pink500,
-      };
-
-    case 'ComponentSplitting':
-      return {
-        keyName: 'ComponentSplitting',
-        title: t('performance.fixComponentSplittingTitle'),
-        explanation: t('performance.fixComponentSplittingDesc'),
-        codeSnippet: `${t('performance.isolateState', {comp})}\nexport const StickyKeyboard = React.memo(KeyboardStickyView);`,
-        impact: t('performance.mediumImpact') as any,
-        impactColor: AppColors.purple500,
-      };
-
-    case 'InteractionManager':
-      return {
-        keyName: 'InteractionManager',
-        title: t('performance.fixInteractionManagerTitle'),
-        explanation: t('performance.fixInteractionManagerDesc'),
-        codeSnippet: `${t('performance.beforeInteractionManager', {comp})}\n\n${t('performance.afterInteractionManager')}`,
-        impact: t('performance.highImpact') as any,
-        impactColor: AppColors.pink500,
-      };
-
-    case 'FlatListWindowing':
-      return {
-        keyName: 'FlatListWindowing',
-        title: t('performance.fixFlatListWindowingTitle'),
-        explanation: t('performance.fixFlatListWindowingDesc'),
-        codeSnippet: `${t('performance.beforeFlatListWindowing', {comp})}`,
-        impact: t('performance.mediumImpact') as any,
-        impactColor: AppColors.purple500,
-      };
-
-    case 'ImageCaching':
-      return {
-        keyName: 'ImageCaching',
-        title: t('performance.fixImageCachingTitle'),
-        explanation: t('performance.fixImageCachingDesc'),
-        codeSnippet: `${t('performance.beforeImageCaching', {comp})}`,
-        impact: t('performance.mediumImpact') as any,
-        impactColor: AppColors.purple500,
-      };
-
-    case 'ContextSplitting':
-      return {
-        keyName: 'ContextSplitting',
-        title: t('performance.fixContextSplittingTitle'),
-        explanation: t('performance.fixContextSplittingDesc'),
-        codeSnippet: `${t('performance.beforeContextSplitting', {comp})}\n\n${t('performance.afterContextSplitting')}`,
-        impact: t('performance.highImpact') as any,
-        impactColor: AppColors.pink500,
-      };
-
-    case 'InlineStylesHoist':
-      return {
-        keyName: 'InlineStylesHoist',
-        title: t('performance.fixInlineStylesHoistTitle'),
-        explanation: t('performance.fixInlineStylesHoistDesc'),
-        codeSnippet: `${t('performance.beforeInlineStyles', {comp})}\n\n${t('performance.afterInlineStyles')}`,
-        impact: t('performance.bestPractice') as any,
-        impactColor: AppColors.pink500,
-      };
-
-    case 'useRef':
-    case 'useRefForTracking':
-    default:
-      return {
-        keyName: 'useRefForTracking',
-        title: t('performance.fixUseRefForTrackingTitle'),
-        explanation: t('performance.fixUseRefForTrackingDesc'),
-        codeSnippet: `${t('performance.beforeUseRef', {comp})}\nconst [eventCount, setEventCount] = useState(0);\n\n${t('performance.afterUseRef')}\nconst eventCountRef = useRef(0);`,
-        impact: t('performance.bestPractice') as any,
-        impactColor: AppColors.pink500,
-      };
-  }
-};
-
-/**
- * Dynamically resolves caller file path or runtime source from the active JavaScript stack trace.
- * Does not assume fixed directory hierarchies (such as src/ or components/) and extracts
- * whatever relative path or symbol the host project structure uses.
- */
-export function getCallerSourceFile(fallbackName?: string): string {
-  try {
-    const stack = new Error().stack;
-    if (!stack) return fallbackName || 'React Native Runtime';
-    const lines = stack.split('\n');
-    for (let i = 0; i < lines.length; i++) {
-      const line = lines[i];
-      if (
-        line.includes('performanceTracker') ||
-        line.includes('node_modules') ||
-        line.includes('Error') ||
-        line.includes('regeneratorRuntime')
-      ) {
-        continue;
-      }
-      const match = line.match(/(?:at\s+)?(?:.*?\((.*?)(?::\d+)?(?::\d+)?\)|(\S+:\d+:\d+))/);
-      if (match) {
-        const file = (match[1] || match[2] || '').trim().replace(/^at\s+/, '');
-        if (file && !file.includes('performanceTracker')) return file;
-      }
-      const cleaned = line.trim().replace(/^at\s+/, '');
-      if (cleaned && !cleaned.includes('performanceTracker')) return cleaned;
-    }
-  } catch (e) {}
-  return fallbackName || 'React Native Runtime';
-}
-
-export const getInitialRenderProfiles = (): ComponentRenderProfile[] => [];
-
-export const getInitialPerformanceEvents = (): PerformanceEvent[] => [];
-
-export const INITIAL_EVENTS: PerformanceEvent[] = [];
-
-let isPerformanceModuleEnabled = false;
-
-export const setPerformanceModuleEnabled = (enabled: boolean) => {
-  isPerformanceModuleEnabled = enabled;
-};
-
-export const getPerformanceModuleEnabled = () => isPerformanceModuleEnabled;
-
-const globalRenderRegistry = new Map<string, ComponentRenderProfile>();
-const renderListeners = new Set<(profiles: ComponentRenderProfile[]) => void>();
-
-const notifyRenderListeners = () => {
-  const list = Array.from(globalRenderRegistry.values());
-  renderListeners.forEach(listener => {
-    try {
-      listener(list);
-    } catch {}
-  });
-};
-
-export const subscribeRenderProfiles = (
-  listener: (profiles: ComponentRenderProfile[]) => void,
-) => {
-  renderListeners.add(listener);
-  listener(Array.from(globalRenderRegistry.values()));
-  return () => {
-    renderListeners.delete(listener);
-  };
-};
-
-export const getRenderProfiles = () => Array.from(globalRenderRegistry.values());
-
-export const registerComponentProfile = (profile: ComponentRenderProfile) => {
-  if (!isPerformanceModuleEnabled) return;
-  globalRenderRegistry.set(profile.name, profile);
-  notifyRenderListeners();
-};
-
-export const trackComponentRender = (params: {
-  name: string;
-  type?: ComponentRenderProfile['type'];
-  sourceFile?: string;
-  renderTimeMs?: number;
-  isWasteful?: boolean;
-  reason?: string;
-  fixKeys?: PerformanceFixKey[];
-}) => {
-  if (!isPerformanceModuleEnabled) return;
-  const existing = globalRenderRegistry.get(params.name);
-  const now = Date.now();
-  const renderTimeMs = params.renderTimeMs ?? 1.5;
-  const isWasteful = params.isWasteful ?? false;
-
-  if (existing) {
-    const nextCount = existing.renderCount + 1;
-    const nextWasteful = existing.wastefulCount + (isWasteful ? 1 : 0);
-    const nextPct = Number(((nextWasteful / nextCount) * 100).toFixed(1));
-    const nextTotalTime = Number(
-      (existing.totalRenderTimeMs + renderTimeMs).toFixed(1),
-    );
-    const nextAvgTime = Number((nextTotalTime / nextCount).toFixed(1));
-    const reasons = params.reason
-      ? Array.from(new Set([...existing.reasons, params.reason]))
-      : existing.reasons;
-
-    const updated: ComponentRenderProfile = {
-      ...existing,
-      renderCount: nextCount,
-      wastefulCount: nextWasteful,
-      wastefulPercentage: nextPct,
-      avgRenderTimeMs: nextAvgTime,
-      totalRenderTimeMs: nextTotalTime,
-      lastRenderedAt: now,
-      reasons,
-      severity:
-        nextPct > 70 && nextCount > 20
-          ? 'critical'
-          : nextPct > 40 && nextCount > 10
-          ? 'warning'
-          : 'optimal',
-    };
-    globalRenderRegistry.set(params.name, updated);
-  } else {
-    const profile: ComponentRenderProfile = {
-      id: `render-${Date.now()}-${Math.random().toString(36).substring(2, 6)}`,
-      name: params.name,
-      type: params.type || 'component',
-      sourceFile: params.sourceFile || getCallerSourceFile(params.name),
-      renderCount: 1,
-      wastefulCount: isWasteful ? 1 : 0,
-      wastefulPercentage: isWasteful ? 100 : 0,
-      avgRenderTimeMs: renderTimeMs,
-      totalRenderTimeMs: renderTimeMs,
-      lastRenderedAt: now,
-      reasons: params.reason ? [params.reason] : [],
-      fixKeys:
-        params.fixKeys || [
-          generateFixSnippet('useCallback', params.name),
-          generateFixSnippet('memo', params.name),
-        ],
-      severity: 'optimal',
-    };
-    globalRenderRegistry.set(params.name, profile);
-  }
-  notifyRenderListeners();
-};
-
-/**
- * Dynamically queries Hermes or JavaScript runtime memory statistics.
- */
-export const getHermesMemoryStats = (): LiveMemoryStats => {
-  try {
-    const hermes = (globalThis as any).HermesInternal;
-    if (hermes && typeof hermes.getInstrumentedStats === 'function') {
-      const stats = hermes.getInstrumentedStats();
-      const heapUsedMb = Number(
-        (
-          (stats.js_heap_size || stats.heap_size || 34800000) / 1048576
-        ).toFixed(1),
-      );
-      const heapTotalMb = Number(
-        (
-          (stats.js_heap_capacity || stats.allocated_bytes || 64000000) /
-          1048576
-        ).toFixed(1),
-      );
-      const gcCount = Number(stats.num_gcs || 0);
-      const gcPauseMs = Number(
-        ((stats.gc_time_ms || 0) / Math.max(1, gcCount)).toFixed(1),
-      );
-      return {
-        heapUsedMb,
-        heapTotalMb,
-        gcCount,
-        gcPauseMs,
-        allocationRateMbPerSec: 1.8,
-      };
-    }
-  } catch {}
-  return {
-    heapUsedMb: 32.5,
-    heapTotalMb: 64.0,
-    gcCount: 0,
-    gcPauseMs: 1.5,
-    allocationRateMbPerSec: 1.2,
-  };
-};
-
-/**
- * Dynamically records and evaluates screen navigation transition performance.
- */
-export const trackNavigationTransition = (
-  screenName: string,
-  durationMs: number,
-  options?: {
-    ttiMs?: number;
-    droppedFrames?: number;
-    source?: string;
-  },
-) => {
-  const duration = Math.max(1, Number(durationMs.toFixed(1)));
-  const tti = options?.ttiMs ? Number(options.ttiMs.toFixed(1)) : duration;
-  const droppedFrames =
-    options?.droppedFrames ??
-    (duration > 32 ? Math.round((duration - 16.67) / 16.67) : 0);
-  const fps = Math.min(
-    60,
-    Math.max(15, Math.round(1000 / Math.max(16.67, duration))),
-  );
-
-  return logPerformanceEvent({
-    type: 'transition',
-    category: 'navigation',
-    fps,
-    durationMs: duration,
-    droppedFrames,
-    frameTimeMs: duration,
-    frameBudgetPct: Number(((duration / 16.67) * 100).toFixed(0)),
-    bottleneckThread: duration > 32 ? 'JS Thread' : 'Balanced',
-    screenName,
-    label: t('performance.transitionEventLabel', {screen: screenName}),
-    detail: t('performance.transitionEventDetail', {duration, tti}),
-    source: options?.source || getCallerSourceFile(screenName),
-    advice: t('performance.transitionEventAdvice'),
-    severity: duration > 50 ? 'critical' : duration > 25 ? 'warning' : 'optimal',
-  });
-};
-
-/**
- * React Hook that automatically profiles screen mounts and navigation transitions.
- */
-export const useNavigationProfiler = (
-  screenName: string,
-  options?: {
-    onTransitionEnd?: (durationMs: number) => void;
-  },
-) => {
-  const mountTimeRef = useRef(Date.now());
-
-  useEffect(() => {
-    const elapsed = Date.now() - mountTimeRef.current;
-    trackNavigationTransition(screenName, elapsed);
-    if (options?.onTransitionEnd) {
-      options.onTransitionEnd(elapsed);
-    }
-  }, [screenName]);
-};
-
-/**
- * Measures synchronous execution duration and alerts on frame budget spikes (>16ms).
- */
-export const trackHeavyTask = <T>(
-  taskName: string,
-  syncFn: () => T,
-  options?: {
-    thresholdMs?: number;
-    source?: string;
-  },
-): T => {
-  const start = Date.now();
-  try {
-    return syncFn();
-  } finally {
-    const duration = Date.now() - start;
-    const threshold = options?.thresholdMs ?? 16;
-    if (duration >= threshold) {
-      logPerformanceEvent({
-        type: 'slow_render',
-        category: 'render',
-        fps: Math.min(60, Math.max(10, Math.round(1000 / duration))),
-        durationMs: duration,
-        frameTimeMs: duration,
-        frameBudgetPct: Number(((duration / 16.67) * 100).toFixed(0)),
-        bottleneckThread: 'JS Thread',
-        screenName: taskName,
-        label: t('performance.heavyTaskEventLabel', {taskName}),
-        detail: t('performance.heavyTaskEventDetail', {duration}),
-        source: options?.source || getCallerSourceFile(taskName),
-        advice: t('performance.heavyTaskEventAdvice'),
-        severity: duration > 50 ? 'critical' : 'warning',
-      });
-    }
-  }
-};
-
-/**
- * Measures async operation / Promise latency and records slow network or disk tasks.
- */
-export const measureAsync = async <T>(
-  taskName: string,
-  asyncFn: () => Promise<T>,
-  options?: {
-    thresholdMs?: number;
-    source?: string;
-  },
-): Promise<T> => {
-  const start = Date.now();
-  try {
-    return await asyncFn();
-  } finally {
-    const duration = Date.now() - start;
-    const threshold = options?.thresholdMs ?? 100;
-    if (duration >= threshold) {
-      logPerformanceEvent({
-        type: 'network',
-        category: 'io',
-        fps: 60,
-        durationMs: duration,
-        bottleneckThread: 'Balanced',
-        screenName: taskName,
-        label: t('performance.asyncOpEventLabel', {opName: taskName}),
-        detail: t('performance.asyncOpEventDetail', {duration}),
-        source: options?.source || getCallerSourceFile(taskName),
-        severity:
-          duration > 1000 ? 'critical' : duration > 300 ? 'warning' : 'optimal',
-      });
-    }
-  }
-};
-
-/**
- * Custom React Hook to profile any component or screen renders dynamically in runtime.
- */
-export const useComponentProfiler = (
-  componentName: string,
-  options?: {
-    type?: ComponentRenderProfile['type'];
-    sourceFile?: string;
-    propsToCompare?: Record<string, any>;
-  },
-) => {
-  const renderCountRef = useRef(0);
-  const prevPropsRef = useRef<any>(options?.propsToCompare);
-  const startTimeRef = useRef(Date.now());
-  const renderTimestampsRef = useRef<number[]>([]);
-  startTimeRef.current = Date.now();
-
-  useEffect(() => {
-    const duration = Date.now() - startTimeRef.current;
-    const now = Date.now();
-    renderCountRef.current += 1;
-
-    // Detect rapid re-render loop spikes (>= 10 renders within 500ms)
-    renderTimestampsRef.current = [
-      ...renderTimestampsRef.current.filter(ts => now - ts <= 500),
-      now,
-    ];
-    if (renderTimestampsRef.current.length >= 10) {
-      logPerformanceEvent({
-        type: 'slow_render',
-        category: 'render',
-        fps: 20,
-        durationMs: duration,
-        bottleneckThread: 'JS Thread',
-        screenName: componentName,
-        label: t('performance.renderLoopWarningLabel', {comp: componentName}),
-        detail: t('performance.renderLoopWarningDetail', {
-          comp: componentName,
-          count: renderTimestampsRef.current.length,
-        }),
-        source: options?.sourceFile || getCallerSourceFile(componentName),
-        advice: t('performance.renderLoopWarningAdvice'),
-        severity: 'critical',
-      });
-    }
-
-    let isWasteful = false;
-    let wastefulReason = undefined;
-
-    if (renderCountRef.current > 1 && options?.propsToCompare) {
-      const prev = prevPropsRef.current;
-      const next = options.propsToCompare;
-      const keys = Object.keys(next);
-      const changedKeys = keys.filter(k => prev[k] !== next[k]);
-      if (changedKeys.length === 0) {
-        isWasteful = true;
-        wastefulReason =
-          'Re-rendered with identical props (memoization candidate)';
-      }
-      prevPropsRef.current = next;
-    }
-
-    trackComponentRender({
-      name: componentName,
-      type: options?.type || 'component',
-      sourceFile: options?.sourceFile || getCallerSourceFile(componentName),
-      renderTimeMs: Math.max(0.5, duration),
-      isWasteful,
-      reason: wastefulReason,
-    });
-  });
-};
-
-export const usePerformanceTracker = (enabled: boolean = true) => {
-  const isTrackerActive = enabled && isPerformanceModuleEnabled;
-  const [isRecording, setIsRecording] = useState(true);
-  const [currentFps, setCurrentFps] = useState(60);
-  const [minFps, setMinFps] = useState(60);
-  const [maxFps, setMaxFps] = useState(60);
-  const [avgFps, setAvgFps] = useState(60);
-  const [totalFrames, setTotalFrames] = useState(0);
-  const [jankyFrameCount, setJankyFrameCount] = useState(0);
-  const [jsLagMs, setJsLagMs] = useState(0);
-  const [fpsHistory, setFpsHistory] = useState<number[]>(() =>
-    Array(30).fill(60),
-  );
-
-  const [memoryStats, setMemoryStats] = useState<LiveMemoryStats>(() =>
-    getHermesMemoryStats(),
-  );
-
-  const [renderProfiles, setRenderProfiles] = useState<
-    ComponentRenderProfile[]
-  >(() => getRenderProfiles());
-  const [events, setEvents] = useState<PerformanceEvent[]>(() =>
-    getPerformanceEvents(),
-  );
-
-  useEffect(() => {
-    if (!isTrackerActive) return;
-    const unsubRender = subscribeRenderProfiles(profiles => {
-      setRenderProfiles(profiles);
-    });
-    const unsubEvents = subscribePerformanceEvents(liveEvents => {
-      setEvents(liveEvents);
-    });
-    return () => {
-      unsubRender();
-      unsubEvents();
-    };
-  }, [isTrackerActive]);
-
-  const lastFrameTimeRef = useRef<number>(Date.now());
-  const rafIdRef = useRef<number | null>(null);
-  const appStartTimestampRef = useRef<number>(Date.now());
-
-  // Live Frame Measurement Loop
-  useEffect(() => {
-    if (!isTrackerActive || !isRecording) return;
-
-    let isMounted = true;
-    let frameCount = 0;
-    let maxLagInSecond = 0;
-    let lastSecond = Date.now();
-
-    const measureFrame = () => {
-      if (!isMounted) return;
-
-      const now = Date.now();
-      const delta = now - lastFrameTimeRef.current;
-      lastFrameTimeRef.current = now;
-
-      const lag = Math.max(0, delta - 16.67);
-      if (lag > maxLagInSecond) {
-        maxLagInSecond = lag;
-      }
-
-      frameCount++;
-
-      if (now - lastSecond >= 1000) {
-        const elapsed = now - lastSecond;
-        const measuredFps = Math.min(
-          60,
-          Math.max(0, Math.round((frameCount * 1000) / elapsed)),
-        );
-
-        setCurrentFps(measuredFps);
-        setMinFps(prev => Math.min(prev, measuredFps));
-        setMaxFps(prev => Math.max(prev, measuredFps));
-        setTotalFrames(prev => prev + frameCount);
-        setJsLagMs(Number(maxLagInSecond.toFixed(1)));
-
-        if (measuredFps < 55) {
-          setJankyFrameCount(prev => prev + 1);
-        }
-
-        setFpsHistory(prev => {
-          const next = [...prev.slice(-29), measuredFps];
-          const sum = next.reduce((a, b) => a + b, 0);
-          setAvgFps(Math.round(sum / next.length));
-          return next;
-        });
-
-        // Update live memory telemetry from Hermes / engine
-        const liveMem = getHermesMemoryStats();
-        setMemoryStats(prev => ({
-          ...prev,
-          heapUsedMb: liveMem.heapUsedMb,
-          heapTotalMb: liveMem.heapTotalMb,
-          gcCount: liveMem.gcCount,
-          gcPauseMs: liveMem.gcPauseMs,
-          allocationRateMbPerSec: liveMem.allocationRateMbPerSec,
-        }));
-
-        if (measuredFps < 50) {
-          const frameTime = Number((1000 / measuredFps).toFixed(1));
-          logPerformanceEvent({
-            type: 'fps_drop',
-            category: 'render',
-            fps: measuredFps,
-            durationMs: frameTime,
-            droppedFrames: Math.max(0, 60 - measuredFps),
-            frameTimeMs: frameTime,
-            frameBudgetPct: Number(((frameTime / 16.67) * 100).toFixed(0)),
-            bottleneckThread: maxLagInSecond > 8 ? 'JS Thread' : 'UI Thread',
-            screenName: 'Live Application Render',
-            label: t('performance.liveFpsDropLabel', {fps: measuredFps}),
-            detail: t('performance.liveFpsDropDetail', {duration: frameTime}),
-            source: 'React Native UI Thread',
-            breakdown: {
-              jsTimeMs: Number((frameTime * 0.65).toFixed(1)),
-              uiTimeMs: Number((frameTime * 0.35).toFixed(1)),
-            },
-            advice: t('performance.liveFpsDropAdvice'),
-            severity: measuredFps < 30 ? 'critical' : 'warning',
-          });
-        }
-
-        frameCount = 0;
-        maxLagInSecond = 0;
-        lastSecond = now;
-      }
-
-      rafIdRef.current = requestAnimationFrame(measureFrame);
-    };
-
-    lastFrameTimeRef.current = Date.now();
-    rafIdRef.current = requestAnimationFrame(measureFrame);
-
-    return () => {
-      isMounted = false;
-      if (rafIdRef.current) cancelAnimationFrame(rafIdRef.current);
-    };
-  }, [isRecording]);
-
-  const mobileVitals: CoreMobileVitals = useMemo(() => {
-    const measuredJankPct =
-      totalFrames > 0
-        ? Number(
-            ((jankyFrameCount / Math.max(1, totalFrames / 60)) * 100).toFixed(
-              1,
-            ),
-          )
-        : 0;
-
-    const slowRenderCount = events.filter(e => e.type === 'slow_render').length;
-    const dynamicInp = Math.min(
-      100,
-      Math.max(8.0, Number((jsLagMs + 12.5).toFixed(1))),
-    );
-    const dynamicFcp = Math.max(
-      120,
-      Math.min(500, Math.round(150 + slowRenderCount * 25)),
-    );
-    const dynamicTti = Math.max(
-      280,
-      Math.min(1200, Math.round(dynamicFcp + 180 + slowRenderCount * 40)),
-    );
-
-    return {
-      ttiMs: dynamicTti,
-      fcpMs: dynamicFcp,
-      inpMs: dynamicInp,
-      jankPercentage: measuredJankPct,
-      grade:
-        measuredJankPct <= 2.0
-          ? 'Optimal'
-          : measuredJankPct <= 5.0
-          ? 'Fair'
-          : 'Poor',
-    };
-  }, [totalFrames, jankyFrameCount, jsLagMs, events]);
-
-  // Aggregate re-render stats
-  const reRenderSummary = useMemo(() => {
-    const totalRenders = renderProfiles.reduce(
-      (sum, p) => sum + p.renderCount,
-      0,
-    );
-    const totalWasteful = renderProfiles.reduce(
-      (sum, p) => sum + p.wastefulCount,
-      0,
-    );
-    const overallWastefulPct =
-      totalRenders > 0
-        ? Number(((totalWasteful / totalRenders) * 100).toFixed(1))
-        : 0;
-    const topOffender = [...renderProfiles].sort(
-      (a, b) => b.renderCount - a.renderCount,
-    )[0];
-
-    return {
-      totalRenders,
-      totalWasteful,
-      overallWastefulPct,
-      topOffender,
-      totalComponentsTracked: renderProfiles.length,
-    };
-  }, [renderProfiles]);
-
-  const clearEvents = () => {
-    clearPerformanceEvents();
-  };
-
-  const resetRenderCounters = useCallback(() => {
-    globalRenderRegistry.forEach((p, key) => {
-      globalRenderRegistry.set(key, {
-        ...p,
-        renderCount: 1,
-        wastefulCount: 0,
-        wastefulPercentage: 0,
-        totalRenderTimeMs: p.avgRenderTimeMs,
-        lastRenderedAt: Date.now(),
-        severity: 'optimal',
-      });
-    });
-    notifyRenderListeners();
-  }, []);
-
-  const simulateComponentRender = useCallback((componentId: string) => {
-    globalRenderRegistry.forEach((p, key) => {
-      if (p.id === componentId || p.name === componentId) {
-        const nextCount = p.renderCount + 1;
-        const nextWasteful = p.wastefulCount + 1;
-        const nextPct = Number(((nextWasteful / nextCount) * 100).toFixed(1));
-        globalRenderRegistry.set(key, {
-          ...p,
-          renderCount: nextCount,
-          wastefulCount: nextWasteful,
-          wastefulPercentage: nextPct,
-          totalRenderTimeMs: Number(
-            (p.totalRenderTimeMs + p.avgRenderTimeMs).toFixed(1),
-          ),
-          lastRenderedAt: Date.now(),
-          severity:
-            nextCount > 30
-              ? 'critical'
-              : nextCount > 15
-              ? 'warning'
-              : 'optimal',
-        });
-      }
-    });
-    notifyRenderListeners();
-  }, []);
-
-  const triggerGc = () => {
-    try {
-      if (typeof (globalThis as any).gc === 'function') {
-        (globalThis as any).gc();
-      }
-    } catch {}
-
-    const reclaimedMb = Number((4.5 + Math.random() * 3.5).toFixed(1));
-    const reclaimedKb = Math.round(reclaimedMb * 1024);
-
-    setMemoryStats(prev => ({
-      ...prev,
-      heapUsedMb: Math.max(
-        18.0,
-        Number((prev.heapUsedMb - reclaimedMb).toFixed(1)),
-      ),
-      gcCount: prev.gcCount + 1,
-      gcPauseMs: Number((1.2 + Math.random() * 0.9).toFixed(1)),
-    }));
-
-    logPerformanceEvent({
-      type: 'memory',
-      category: 'memory',
-      fps: 60,
-      durationMs: Number((1.6 + Math.random() * 0.8).toFixed(1)),
-      label: t('performance.gcCycleLabel'),
-      detail: t('performance.gcCycleDetail', {amount: reclaimedMb}),
-      source: 'Hermes JavaScript VM Scavenger',
-      breakdown: {jsTimeMs: 1.8, uiTimeMs: 0.3},
-      heapDeltaKb: -reclaimedKb,
-      advice: t('performance.gcCycleAdvice'),
-      severity: 'optimal',
-    });
-  };
-
-  return {
-    isRecording,
-    setIsRecording,
-    currentFps,
-    minFps,
-    maxFps,
-    avgFps,
-    totalFrames,
-    jankyFrameCount,
-    jsLagMs,
-    fpsHistory,
-    memoryStats,
-    mobileVitals,
-    renderProfiles,
-    reRenderSummary,
-    resetRenderCounters,
-    simulateComponentRender,
-    events,
-    setEvents,
-    clearEvents,
-    triggerGc,
-  };
-};
-
-const globalPerformanceEvents: PerformanceEvent[] = [...INITIAL_EVENTS];
-const performanceListeners = new Set<(events: PerformanceEvent[]) => void>();
-
-let maxPerformanceEventsLimit = 100;
-
-export const setMaxPerformanceEventsLimit = (limit: number): void => {
-  maxPerformanceEventsLimit = Math.max(10, limit);
-  if (globalPerformanceEvents.length > maxPerformanceEventsLimit) {
-    globalPerformanceEvents.length = maxPerformanceEventsLimit;
-    performanceListeners.forEach(listener => {
-      try {
-        listener([...globalPerformanceEvents]);
-      } catch {}
-    });
-  }
-};
-
-export const getMaxPerformanceEventsLimit = (): number => maxPerformanceEventsLimit;
-
-export const prunePerformanceEvents = (targetCount?: number): number => {
-  const countToKeep = targetCount !== undefined ? Math.max(0, targetCount) : Math.floor(globalPerformanceEvents.length / 2);
-  const pruned = globalPerformanceEvents.length - countToKeep;
-  if (pruned > 0) {
-    globalPerformanceEvents.length = countToKeep;
-    performanceListeners.forEach(listener => {
-      try {
-        listener([...globalPerformanceEvents]);
-      } catch {}
-    });
-  }
-  return Math.max(0, pruned);
-};
-
-export const logPerformanceEvent = (
-  event: Omit<PerformanceEvent, 'id' | 'timestamp'> & {
-    id?: string;
-    timestamp?: number;
-  },
-) => {
-  const fullEvent: PerformanceEvent = {
-    id:
-      event.id ||
-      `perf-${Date.now()}-${Math.random().toString(36).substring(2, 6)}`,
-    timestamp: event.timestamp || Date.now(),
-    source: event.source || getCallerSourceFile(),
-    ...event,
-  };
-  globalPerformanceEvents.unshift(fullEvent);
-  if (globalPerformanceEvents.length > maxPerformanceEventsLimit) {
-    globalPerformanceEvents.length = maxPerformanceEventsLimit;
-  }
-  performanceListeners.forEach(listener => {
-    try {
-      listener([...globalPerformanceEvents]);
-    } catch {}
-  });
-  return fullEvent;
-};
-
-export const clearPerformanceEvents = () => {
-  globalPerformanceEvents.length = 0;
-  performanceListeners.forEach(listener => {
-    try {
-      listener([]);
-    } catch {}
-  });
-};
-
-export const subscribePerformanceEvents = (
-  listener: (events: PerformanceEvent[]) => void,
-) => {
-  performanceListeners.add(listener);
-  listener([...globalPerformanceEvents]);
-  return () => {
-    performanceListeners.delete(listener);
-  };
-};
-
-export const getPerformanceEvents = () => [...globalPerformanceEvents];