react-native-inapp-inspector 1.1.26 → 1.1.28

package/dist/esm/customHooks/performanceTracker.js

@@ -1,356 +1,467 @@
 import { AppColors } from '../styles/AppColors';
+import { t } from '../i18n';
 import { useState, useEffect, useRef, useMemo, useCallback } from 'react';
-const INITIAL_RENDER_PROFILES = [
-    {
-        id: 'render-1',
-        name: 'ProductDetailScreen',
-        type: 'screen',
-        sourceFile: 'src/screens/ProductDetailScreen.tsx',
-        renderCount: 48,
-        wastefulCount: 34,
-        wastefulPercentage: 70.8,
-        avgRenderTimeMs: 14.2,
-        totalRenderTimeMs: 681.6,
-        lastRenderedAt: Date.now() - 2500,
-        reasons: [
-            'Inline arrow function props passed to children (onAddToCart={() => ...})',
-            'Unmemoized Redux selector creating new object reference on every dispatch',
-            'Dynamic style object created in render body ({ marginTop: insets.top + 10 })',
-        ],
-        fixKeys: [
-            {
+/**
+ * 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, componentName = 'Component', context) => {
+    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: 'Wrap Event Handlers in useCallback',
-                explanation: 'Inline functions recreate a new memory reference on every render, invalidating React.memo on child components.',
-                codeSnippet: `// ❌ Before:\n<AddToCartButton onPress={() => handleAddToCart(item.id)} />\n\n// ✅ After:\nconst onAddToCart = useCallback(() => {\n  handleAddToCart(item.id);\n}, [item.id]);\n<AddToCartButton onPress={onAddToCart} />`,
-                impact: 'High Impact',
+                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'),
                 impactColor: AppColors.pink500,
-            },
-            {
+            };
+        case 'createSelector':
+        case 'useMemo':
+            return {
                 keyName: 'createSelector',
-                title: 'Memoize Redux / Zustand Selectors with shallowEqual',
-                explanation: 'Returning new object or array references inside useSelector forces an automatic re-render on every state dispatch.',
-                codeSnippet: `// ❌ Before:\nconst { items, total } = useSelector(state => ({ items: state.cart.items, total: state.cart.total }));\n\n// ✅ After:\nimport { shallowEqual } from 'react-redux';\nconst { items, total } = useSelector(\n  state => ({ items: state.cart.items, total: state.cart.total }),\n  shallowEqual\n);`,
-                impact: 'High Impact',
+                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'),
                 impactColor: AppColors.pink500,
-            },
-            {
-                keyName: 'useMemoStyles',
-                title: 'Hoist Styles or Use useMemo for Dynamic Dimensions',
-                explanation: 'Inline style objects create new object identities on every frame pass, causing Yoga Flexbox reconciliation diffs.',
-                codeSnippet: `// ❌ Before:\n<View style={{ paddingTop: insets.top, backgroundColor: AppColors.white }} />\n\n// ✅ After:\nconst containerStyle = useMemo(() => ({\n  paddingTop: insets.top,\n  backgroundColor: AppColors.white,\n}), [insets.top]);\n<View style={containerStyle} />`,
-                impact: 'Medium Impact',
-                impactColor: AppColors.purple500,
-            },
-        ],
-        severity: 'critical',
-    },
-    {
-        id: 'render-2',
-        name: 'HomeFeedFlatList',
-        type: 'screen',
-        sourceFile: 'src/screens/HomeScreen.tsx',
-        renderCount: 36,
-        wastefulCount: 22,
-        wastefulPercentage: 61.1,
-        avgRenderTimeMs: 18.6,
-        totalRenderTimeMs: 669.6,
-        lastRenderedAt: Date.now() - 8000,
-        reasons: [
-            'FlatList missing getItemLayout causing async layout measuring passes',
-            'renderItem function defined anonymously inside JSX body',
-            'List item components not wrapped with React.memo',
-        ],
-        fixKeys: [
-            {
+            };
+        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'),
+                impactColor: AppColors.pink500,
+            };
+        case 'getItemLayout':
+            return {
                 keyName: 'getItemLayout',
-                title: 'Implement getItemLayout for Fixed-Height Items',
-                explanation: 'Supplying getItemLayout allows FlatList to immediately compute scroll offsets and virtual windows without measuring views asynchronously.',
-                codeSnippet: `const ITEM_HEIGHT = 80;\nconst getItemLayout = useCallback((data, index) => ({\n  length: ITEM_HEIGHT,\n  offset: ITEM_HEIGHT * index,\n  index,\n}), []);\n\n<FlatList\n  data={items}\n  getItemLayout={getItemLayout}\n  renderItem={renderItem}\n  keyExtractor={item => item.id}\n/>`,
-                impact: 'High Impact',
+                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'),
                 impactColor: AppColors.pink500,
-            },
-            {
-                keyName: 'React.memo',
-                title: 'Wrap List Items in React.memo',
-                explanation: 'Prevents all 50+ visible list items from re-rendering when parent list state (e.g. scroll position or pagination) updates.',
-                codeSnippet: `// FeedItem.tsx\nexport const FeedItem = React.memo(({ item, onSelect }: FeedItemProps) => {\n  return <View>...</View>;\n}, (prev, next) => prev.item.id === next.item.id && prev.item.updatedAt === next.item.updatedAt);`,
-                impact: 'High Impact',
+            };
+        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'),
+                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'),
                 impactColor: AppColors.pink500,
-            },
-        ],
-        severity: 'critical',
-    },
-    {
-        id: 'render-3',
-        name: 'CartSummarySheet',
-        type: 'modal',
-        sourceFile: 'src/components/CartSummarySheet.tsx',
-        renderCount: 24,
-        wastefulCount: 14,
-        wastefulPercentage: 58.3,
-        avgRenderTimeMs: 8.4,
-        totalRenderTimeMs: 201.6,
-        lastRenderedAt: Date.now() - 14000,
-        reasons: [
-            'Parent screen re-rendered on keyboard show/hide event',
-            'Unstable callback reference passed into checkout button',
-        ],
-        fixKeys: [
-            {
+            };
+        case 'ComponentSplitting':
+            return {
                 keyName: 'ComponentSplitting',
-                title: 'Isolate Fast-Changing State in Leaf Components',
-                explanation: 'Move keyboard listeners and modal animation state into self-contained subcomponents so the parent does not re-render.',
-                codeSnippet: `// ❌ Before: Parent holds keyboardHeight state, re-rendering entire screen\n// ✅ After: Use KeyboardStickyView component that encapsulates layout animation`,
-                impact: 'Medium Impact',
+                title: t('performance.fixComponentSplittingTitle'),
+                explanation: t('performance.fixComponentSplittingDesc'),
+                codeSnippet: `${t('performance.isolateState', { comp })}\nexport const StickyKeyboard = React.memo(KeyboardStickyView);`,
+                impact: t('performance.mediumImpact'),
                 impactColor: AppColors.purple500,
-            },
-        ],
-        severity: 'warning',
-    },
-    {
-        id: 'render-4',
-        name: 'SearchFilterHeader',
-        type: 'component',
-        sourceFile: 'src/components/SearchFilterHeader.tsx',
-        renderCount: 29,
-        wastefulCount: 16,
-        wastefulPercentage: 55.2,
-        avgRenderTimeMs: 6.2,
-        totalRenderTimeMs: 179.8,
-        lastRenderedAt: Date.now() - 19000,
-        reasons: [
-            'TextInput value state triggers parent re-render on every keystroke without debouncing',
-            'Passing unmemoized filter object ({ category, minPrice }) down to child chips',
-        ],
-        fixKeys: [
-            {
-                keyName: 'DebouncedInput',
-                title: 'Debounce Search Input or Use Local Controlled State',
-                explanation: 'Do not propagate keystroke state into global store immediately. Use a 250ms debounce or uncontrolled ref.',
-                codeSnippet: `const [localText, setLocalText] = useState('');\nconst debouncedSearch = useMemo(\n  () => debounce(query => onSearch(query), 250),\n  [onSearch]\n);`,
-                impact: 'High Impact',
+            };
+        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'),
                 impactColor: AppColors.pink500,
-            },
-            {
-                keyName: 'PrimitiveProps',
-                title: 'Pass Primitive Props Instead of Large Objects',
-                explanation: 'Passing only categoryId string instead of whole category object prevents re-renders when other category metadata updates.',
-                codeSnippet: `// ❌ Before:\n<CategoryChip category={category} />\n\n// ✅ After:\n<CategoryChip id={category.id} name={category.name} isSelected={selectedId === category.id} />`,
-                impact: 'Medium Impact',
+            };
+        case 'FlatListWindowing':
+            return {
+                keyName: 'FlatListWindowing',
+                title: t('performance.fixFlatListWindowingTitle'),
+                explanation: t('performance.fixFlatListWindowingDesc'),
+                codeSnippet: `${t('performance.beforeFlatListWindowing', { comp })}`,
+                impact: t('performance.mediumImpact'),
+                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'),
                 impactColor: AppColors.purple500,
-            },
-        ],
-        severity: 'warning',
-    },
-    {
-        id: 'render-5',
-        name: 'NavbarUserProfile',
-        type: 'component',
-        sourceFile: 'src/components/NavbarUserProfile.tsx',
-        renderCount: 12,
-        wastefulCount: 2,
-        wastefulPercentage: 16.7,
-        avgRenderTimeMs: 3.1,
-        totalRenderTimeMs: 37.2,
-        lastRenderedAt: Date.now() - 32000,
-        reasons: [
-            'Avatar image cache re-validation on auth session refresh',
-        ],
-        fixKeys: [
-            {
+            };
+        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'),
+                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'),
+                impactColor: AppColors.pink500,
+            };
+        case 'useRef':
+        case 'useRefForTracking':
+        default:
+            return {
                 keyName: 'useRefForTracking',
-                title: 'Use useRef for Non-Visual Tracking Values',
-                explanation: 'Do not store analytics timers, scroll offsets, or tracking IDs in useState if they do not directly alter the JSX tree.',
-                codeSnippet: `// ❌ Before:\nconst [sessionCount, setSessionCount] = useState(0);\n\n// ✅ After:\nconst sessionCountRef = useRef(0);`,
-                impact: 'Best Practice',
-                impactColor: AppColors.sky500,
-            },
-        ],
-        severity: 'optimal',
-    },
-];
-export const INITIAL_EVENTS = [
-    {
-        id: 'perf-1',
-        timestamp: Date.now() - 48000,
-        type: 'fps_drop',
-        category: 'navigation',
-        fps: 38,
-        durationMs: 26.3,
-        label: 'Main Thread Spike during Navigation',
-        detail: 'Screen transition triggered heavy layout reconciliation and simultaneous component mounts.',
-        source: 'src/navigation/RootNavigator.tsx',
-        breakdown: { jsTimeMs: 18.2, uiTimeMs: 8.1, bridgeLatencyMs: 1.2 },
-        heapDeltaKb: 640,
-        advice: 'Defer non-critical offscreen hooks with InteractionManager.runAfterInteractions to preserve 60 FPS.',
-        severity: 'warning',
-    },
-    {
-        id: 'perf-2',
-        timestamp: Date.now() - 41000,
-        type: 'slow_render',
-        category: 'render',
-        fps: 42,
-        durationMs: 23.8,
-        label: 'FlatList Virtualization Re-render Pass',
-        detail: 'FlatList rendered 25 items simultaneously on orientation change without memoized row component.',
-        source: 'src/components/Inspector/NetworkTab.tsx',
-        breakdown: { jsTimeMs: 16.4, uiTimeMs: 7.4 },
-        heapDeltaKb: 380,
-        advice: 'Implement getItemLayout and React.memo(LogCard) to skip redundant diffing passes.',
-        severity: 'warning',
-    },
-    {
-        id: 'perf-3',
-        timestamp: Date.now() - 35000,
-        type: 'transition',
-        category: 'navigation',
-        fps: 59,
-        durationMs: 16.9,
-        label: 'Native Modal Slide-Up Transition',
-        detail: 'Hardware accelerated native driver animated transform running smoothly at sustained 60 FPS.',
-        source: 'src/components/Inspector/MainScreen.tsx',
-        breakdown: { jsTimeMs: 2.1, uiTimeMs: 14.8 },
-        heapDeltaKb: 120,
-        advice: 'Using nativeDriver: true successfully prevents JS thread blocking during animations.',
-        severity: 'optimal',
-    },
-    {
-        id: 'perf-4',
-        timestamp: Date.now() - 28000,
-        type: 'memory',
-        category: 'memory',
-        fps: 60,
-        durationMs: 16.6,
-        label: 'Hermes Generational Garbage Collection',
-        detail: 'Minor generational GC cycle scavenged 4.2 MB ephemeral heap objects with sub-millisecond thread pause.',
-        source: 'Hermes VM Garbage Collector',
-        breakdown: { jsTimeMs: 3.1, uiTimeMs: 0.2 },
-        heapDeltaKb: -4280,
-        advice: 'Hermes generational garbage collector is operating within optimal sub-5ms limits.',
-        severity: 'optimal',
-    },
-    {
-        id: 'perf-5',
-        timestamp: Date.now() - 22000,
-        type: 'network',
-        category: 'io',
-        fps: 48,
-        durationMs: 20.8,
-        label: 'Large JSON Payload Deserialization',
-        detail: '50-item API response parse overhead in network adapter (185 KB JSON raw string).',
-        source: 'src/customHooks/networkLogger.ts',
-        breakdown: { jsTimeMs: 15.6, uiTimeMs: 5.2, bridgeLatencyMs: 2.1 },
-        heapDeltaKb: 890,
-        advice: 'Consider paginating API payloads or streaming responses if payload size exceeds 250 KB.',
-        severity: 'warning',
-    },
-    {
-        id: 'perf-6',
-        timestamp: Date.now() - 17000,
-        type: 'slow_render',
-        category: 'render',
-        fps: 52,
-        durationMs: 19.2,
-        label: 'Image Bitmap Decode & Rasterization',
-        detail: 'Retina raster decode for banner_dark.png (1200×630px raster buffer allocation).',
-        source: 'src/components/Inspector/BundleTab.tsx',
-        breakdown: { jsTimeMs: 3.4, uiTimeMs: 15.8 },
-        heapDeltaKb: 1450,
-        advice: 'Downscale asset dimensions or convert to WebP to reduce decode latency by ~65%.',
-        severity: 'warning',
-    },
-    {
-        id: 'perf-7',
-        timestamp: Date.now() - 12000,
-        type: 'bridge',
-        category: 'bridge',
-        fps: 60,
-        durationMs: 16.6,
-        label: 'Native TurboModule JSI Invocation',
-        detail: 'AsyncStorage / MMKV preferences transaction read across 32 configuration keys.',
-        source: 'src/helpers/settingsStore.ts',
-        breakdown: { jsTimeMs: 1.8, uiTimeMs: 0.8, bridgeLatencyMs: 0.4 },
-        heapDeltaKb: 45,
-        advice: 'Direct C++ JSI Turbomodule bindings completely bypass legacy JSON bridge serialization overhead.',
-        severity: 'optimal',
-    },
-    {
-        id: 'perf-8',
-        timestamp: Date.now() - 8000,
-        type: 'slow_render',
-        category: 'render',
-        fps: 60,
-        durationMs: 16.6,
-        label: 'Redux Action State Tree Diffing',
-        detail: 'Redux dispatch pass evaluated 6 reducer slices and emitted state notification in 4.8ms.',
-        source: 'src/components/Inspector/ReduxTab.tsx',
-        breakdown: { jsTimeMs: 4.8, uiTimeMs: 1.2 },
-        heapDeltaKb: 180,
-        advice: 'State tree immutability preserved. Memoized selectors prevented redundant component renders.',
-        severity: 'optimal',
-    },
-    {
-        id: 'perf-9',
-        timestamp: Date.now() - 4000,
-        type: 'touch',
-        category: 'render',
-        fps: 60,
-        durationMs: 16.6,
-        label: 'Touch-to-Render Event Latency',
-        detail: 'Gesture responder dispatched tap event to TabBar button with immediate 60 FPS response.',
-        source: 'src/components/Inspector/TabBar.tsx',
-        breakdown: { jsTimeMs: 4.2, uiTimeMs: 2.1 },
-        heapDeltaKb: 30,
-        advice: 'Touch responder latency is well within standard 16.67ms frame budget.',
-        severity: 'optimal',
-    },
-    {
-        id: 'perf-10',
-        timestamp: Date.now() - 1500,
-        type: 'transition',
-        category: 'render',
-        fps: 60,
-        durationMs: 16.6,
-        label: 'C++ Yoga Flexbox Layout Pass',
-        detail: 'Inspector UI multi-tab card layout recalculation and font metrics pass in C++ Yoga engine.',
-        source: 'Yoga Flexbox Layout Engine',
-        breakdown: { jsTimeMs: 2.8, uiTimeMs: 3.4 },
-        heapDeltaKb: 65,
-        advice: 'Flexbox layout constraints are cached and computed efficiently with zero reflow penalties.',
-        severity: 'optimal',
-    },
-];
-// Global in-memory render registry
+                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'),
+                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) {
+    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 = () => [];
+export const getInitialPerformanceEvents = () => [];
+export const INITIAL_EVENTS = [];
 const globalRenderRegistry = new Map();
-INITIAL_RENDER_PROFILES.forEach(profile => {
+const renderListeners = new Set();
+const notifyRenderListeners = () => {
+    const list = Array.from(globalRenderRegistry.values());
+    renderListeners.forEach(listener => {
+        try {
+            listener(list);
+        }
+        catch { }
+    });
+};
+export const subscribeRenderProfiles = (listener) => {
+    renderListeners.add(listener);
+    listener(Array.from(globalRenderRegistry.values()));
+    return () => {
+        renderListeners.delete(listener);
+    };
+};
+export const getRenderProfiles = () => Array.from(globalRenderRegistry.values());
+export const registerComponentProfile = (profile) => {
     globalRenderRegistry.set(profile.name, profile);
-});
+    notifyRenderListeners();
+};
+export const trackComponentRender = (params) => {
+    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 = {
+            ...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 = {
+            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 = () => {
+    try {
+        const hermes = globalThis.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, durationMs, options) => {
+    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, options) => {
+    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 = (taskName, syncFn, options) => {
+    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 (taskName, asyncFn, options) => {
+    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, options) => {
+    const renderCountRef = useRef(0);
+    const prevPropsRef = useRef(options?.propsToCompare);
+    const startTimeRef = useRef(Date.now());
+    const renderTimestampsRef = useRef([]);
+    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 = () => {
     const [isRecording, setIsRecording] = useState(true);
     const [currentFps, setCurrentFps] = useState(60);
-    const [minFps, setMinFps] = useState(57);
+    const [minFps, setMinFps] = useState(60);
     const [maxFps, setMaxFps] = useState(60);
-    const [avgFps, setAvgFps] = useState(59);
-    const [totalFrames, setTotalFrames] = useState(4820);
-    const [jankyFrameCount, setJankyFrameCount] = useState(4);
-    const [jsLagMs, setJsLagMs] = useState(1.2);
-    const [fpsHistory, setFpsHistory] = useState([
-        60, 59, 60, 60, 58, 60, 59, 60, 60, 60, 57, 60, 59, 60, 60, 58, 60, 60, 59, 60,
-        60, 60, 59, 60, 58, 60, 60, 60, 59, 60,
-    ]);
-    const [memoryStats, setMemoryStats] = useState({
-        heapUsedMb: 34.8,
-        heapTotalMb: 64.0,
-        gcCount: 14,
-        gcPauseMs: 2.1,
-        allocationRateMbPerSec: 1.8,
-    });
-    const [renderProfiles, setRenderProfiles] = useState(INITIAL_RENDER_PROFILES);
-    const [events, setEvents] = useState(INITIAL_EVENTS);
+    const [avgFps, setAvgFps] = useState(60);
+    const [totalFrames, setTotalFrames] = useState(0);
+    const [jankyFrameCount, setJankyFrameCount] = useState(0);
+    const [jsLagMs, setJsLagMs] = useState(0);
+    const [fpsHistory, setFpsHistory] = useState(() => Array(30).fill(60));
+    const [memoryStats, setMemoryStats] = useState(() => getHermesMemoryStats());
+    const [renderProfiles, setRenderProfiles] = useState(() => getRenderProfiles());
+    const [events, setEvents] = useState(() => getPerformanceEvents());
+    useEffect(() => {
+        const unsubRender = subscribeRenderProfiles(profiles => {
+            setRenderProfiles(profiles);
+        });
+        const unsubEvents = subscribePerformanceEvents(liveEvents => {
+            setEvents(liveEvents);
+        });
+        return () => {
+            unsubRender();
+            unsubEvents();
+        };
+    }, []);
     const lastFrameTimeRef = useRef(Date.now());
     const rafIdRef = useRef(null);
+    const appStartTimestampRef = useRef(Date.now());
     // Live Frame Measurement Loop
     useEffect(() => {
         if (!isRecording)
@@ -387,35 +498,38 @@ export const usePerformanceTracker = () => {
                     setAvgFps(Math.round(sum / next.length));
                     return next;
                 });
-                // Simulate subtle real-world memory fluctuation
-                setMemoryStats(prev => {
-                    const delta = (Math.random() * 0.4 - 0.18);
-                    const nextUsed = Math.min(prev.heapTotalMb * 0.9, Math.max(20.0, Number((prev.heapUsedMb + delta).toFixed(1))));
-                    return {
-                        ...prev,
-                        heapUsedMb: nextUsed,
-                        allocationRateMbPerSec: Number((1.2 + Math.random() * 1.4).toFixed(1)),
-                    };
-                });
+                // 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 newEvent = {
-                        id: `drop-${Date.now()}`,
-                        timestamp: Date.now(),
+                    const frameTime = Number((1000 / measuredFps).toFixed(1));
+                    logPerformanceEvent({
                         type: 'fps_drop',
                         category: 'render',
                         fps: measuredFps,
-                        durationMs: Number((1000 / measuredFps).toFixed(1)),
-                        label: `Live Frame Rate Dip (${measuredFps} FPS)`,
-                        detail: `Main thread frame duration extended to ${(1000 / measuredFps).toFixed(1)}ms during view update.`,
+                        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(((1000 / measuredFps) * 0.65).toFixed(1)),
-                            uiTimeMs: Number(((1000 / measuredFps) * 0.35).toFixed(1)),
+                            jsTimeMs: Number((frameTime * 0.65).toFixed(1)),
+                            uiTimeMs: Number((frameTime * 0.35).toFixed(1)),
                         },
-                        advice: 'Heavy JavaScript execution during frame pass delayed display presentation.',
+                        advice: t('performance.liveFpsDropAdvice'),
                         severity: measuredFps < 30 ? 'critical' : 'warning',
-                    };
-                    setEvents(prev => [newEvent, ...prev.slice(0, 49)]);
+                    });
                 }
                 frameCount = 0;
                 maxLagInSecond = 0;
@@ -432,20 +546,32 @@ export const usePerformanceTracker = () => {
         };
     }, [isRecording]);
     const mobileVitals = useMemo(() => {
-        const jankPct = totalFrames > 0 ? Number(((jankyFrameCount / Math.max(1, totalFrames / 60)) * 100).toFixed(1)) : 0.8;
+        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: 412,
-            fcpMs: 180,
-            inpMs: 14.2,
-            jankPercentage: jankPct,
-            grade: jankPct <= 2.0 ? 'Optimal' : jankPct <= 5.0 ? 'Fair' : 'Poor',
+            ttiMs: dynamicTti,
+            fcpMs: dynamicFcp,
+            inpMs: dynamicInp,
+            jankPercentage: measuredJankPct,
+            grade: measuredJankPct <= 2.0
+                ? 'Optimal'
+                : measuredJankPct <= 5.0
+                    ? 'Fair'
+                    : 'Poor',
         };
-    }, [totalFrames, jankyFrameCount]);
+    }, [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 overallWastefulPct = totalRenders > 0
+            ? Number(((totalWasteful / totalRenders) * 100).toFixed(1))
+            : 0;
         const topOffender = [...renderProfiles].sort((a, b) => b.renderCount - a.renderCount)[0];
         return {
             totalRenders,
@@ -456,61 +582,73 @@ export const usePerformanceTracker = () => {
         };
     }, [renderProfiles]);
     const clearEvents = () => {
-        setEvents([]);
+        clearPerformanceEvents();
     };
     const resetRenderCounters = useCallback(() => {
-        setRenderProfiles(prev => prev.map(p => ({
-            ...p,
-            renderCount: 1,
-            wastefulCount: 0,
-            wastefulPercentage: 0,
-            totalRenderTimeMs: p.avgRenderTimeMs,
-            lastRenderedAt: Date.now(),
-            severity: 'optimal',
-        })));
+        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) => {
-        setRenderProfiles(prev => prev.map(p => {
-            if (p.id === componentId) {
+        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));
-                return {
+                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',
-                };
+                    severity: nextCount > 30
+                        ? 'critical'
+                        : nextCount > 15
+                            ? 'warning'
+                            : 'optimal',
+                });
             }
-            return p;
-        }));
+        });
+        notifyRenderListeners();
     }, []);
     const triggerGc = () => {
+        try {
+            if (typeof globalThis.gc === 'function') {
+                globalThis.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(22.4, Number((prev.heapUsedMb - 6.8).toFixed(1))),
+            heapUsedMb: Math.max(18.0, Number((prev.heapUsedMb - reclaimedMb).toFixed(1))),
             gcCount: prev.gcCount + 1,
-            gcPauseMs: Number((1.4 + Math.random() * 0.8).toFixed(1)),
+            gcPauseMs: Number((1.2 + Math.random() * 0.9).toFixed(1)),
         }));
-        const gcEvent = {
-            id: `gc-${Date.now()}`,
-            timestamp: Date.now(),
+        logPerformanceEvent({
             type: 'memory',
             category: 'memory',
             fps: 60,
-            durationMs: 2.1,
-            label: 'Manual Hermes GC Cycle Invoked',
-            detail: 'Reclaimed ~6.8 MB unreferenced objects and compacted nursery spaces.',
-            source: 'Hermes Memory Scavenger',
+            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: -6960,
-            advice: 'Heap usage optimized. Generational nursery cleared.',
+            heapDeltaKb: -reclaimedKb,
+            advice: t('performance.gcCycleAdvice'),
             severity: 'optimal',
-        };
-        setEvents(prev => [gcEvent, ...prev.slice(0, 49)]);
+        });
     };
     return {
         isRecording,
@@ -539,8 +677,10 @@ const globalPerformanceEvents = [...INITIAL_EVENTS];
 const performanceListeners = new Set();
 export const logPerformanceEvent = (event) => {
     const fullEvent = {
-        id: event.id || `perf-${Date.now()}-${Math.random().toString(36).substring(2, 6)}`,
+        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);