@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.11 → 0.2.16

package/dist/hooks/use-component-performance.js

@@ -1,344 +1,238 @@
-import React, { useState, useCallback, useRef, useEffect, ReactNode, ComponentType } from 'react'
-
-export interface ComponentPerformanceConfig {
-  enableMemoization?: boolean
-  enableLazyLoading?: boolean
-  enableVirtualization?: boolean
-  enablePerformanceMonitoring?: boolean
-  enableAutoOptimization?: boolean
-  performanceThreshold?: number
-  memoizationThreshold?: number
-  virtualizationThreshold?: number
-}
-
-export interface PerformanceMetrics {
-  renderTime: number
-  memoryUsage: number
-  reRenderCount: number
-  optimizationLevel: 'none' | 'low' | 'medium' | 'high'
-  lastOptimization: string
-}
-
-export interface ComponentPerformanceCallbacks {
-  onPerformanceWarning?: (metrics: PerformanceMetrics) => void
-  onOptimizationApplied?: (type: string, component: string) => void
-  onPerformanceImproved?: (improvement: number) => void
-  onMemoryWarning?: (usage: number) => void
-}
-
-export const useComponentPerformance = (
-  config: ComponentPerformanceConfig = {},
-  callbacks: ComponentPerformanceCallbacks = {}
-) => {
-  const {
-    enableMemoization = true,
-    enableLazyLoading = true,
-    enableVirtualization = true,
-    enablePerformanceMonitoring = true,
-    enableAutoOptimization = true,
-    performanceThreshold = 16.67, // 60fps target
+import React, { useState, useCallback, useRef, useEffect } from 'react';
+export const useComponentPerformance = (config = {}, callbacks = {}) => {
+    const { enableMemoization = true, enableLazyLoading = true, enableVirtualization = true, enablePerformanceMonitoring = true, enableAutoOptimization = true, performanceThreshold = 16.67, // 60fps target
     memoizationThreshold = 100, // ms
     virtualizationThreshold = 1000 // items
-  } = config
-
-  const [metrics, setMetrics] = useState<PerformanceMetrics>({
-    renderTime: 0,
-    memoryUsage: 0,
-    reRenderCount: 0,
-    optimizationLevel: 'none',
-    lastOptimization: 'none'
-  })
-
-  const [isOptimizing, setIsOptimizing] = useState(false)
-  const [optimizations, setOptimizations] = useState<string[]>([])
-  const [memoizedValues] = useState<Map<string, any>>(new Map())
-  const [lazyComponents] = useState<Map<string, ComponentType<any>>>(new Map())
-  
-  const renderStartTimeRef = useRef<number>(0)
-  const renderCountRef = useRef<number>(0)
-  const performanceTimerRef = useRef<number | null>(null)
-  const memoryCheckIntervalRef = useRef<number | null>(null)
-
-  // Performance monitoring
-  const startRenderMeasurement = useCallback(() => {
-    if (!enablePerformanceMonitoring) return () => {}
-    
-    renderStartTimeRef.current = performance.now()
-    renderCountRef.current++
-    
-    return () => {
-      const renderTime = performance.now() - renderStartTimeRef.current
-      
-      setMetrics(prev => ({
-        ...prev,
-        renderTime,
-        reRenderCount: renderCountRef.current
-      }))
-      
-      // Check if optimization is needed
-      if (renderTime > performanceThreshold && enableAutoOptimization) {
-        suggestOptimizations(renderTime)
-      }
-    }
-  }, [enablePerformanceMonitoring, enableAutoOptimization, performanceThreshold])
-
-  // Memoization optimization
-  const memoizeValue = useCallback(<T>(
-    key: string,
-    value: T,
-    dependencies: any[]
-  ): T => {
-    if (!enableMemoization) return value
-    
-    const dependencyKey = JSON.stringify(dependencies)
-    const memoKey = `${key}-${dependencyKey}`
-    
-    if (memoizedValues.has(memoKey)) {
-      return memoizedValues.get(memoKey)
-    }
-    
-    memoizedValues.set(memoKey, value)
-    
-    const optimization = `Memoization applied to ${key}`
-    setOptimizations(prev => [...prev, optimization])
-    callbacks.onOptimizationApplied?.('memoization', key)
-    
-    return value
-  }, [enableMemoization, memoizedValues, callbacks])
-
-  // Lazy loading optimization
-  const lazyLoadComponent = useCallback((
-    componentId: string,
-    componentLoader: () => Promise<{ default: ComponentType<any> }>
-  ) => {
-    if (!enableLazyLoading) return null
-    
-    if (lazyComponents.has(componentId)) {
-      return lazyComponents.get(componentId)
-    }
-    
-    const LazyComponent = React.lazy(componentLoader)
-    lazyComponents.set(componentId, LazyComponent)
-    
-    const optimization = `Lazy loading applied to ${componentId}`
-    setOptimizations(prev => [...prev, optimization])
-    callbacks.onOptimizationApplied?.('lazy-loading', componentId)
-    
-    return LazyComponent
-  }, [enableLazyLoading, lazyComponents, callbacks])
-
-  // Virtualization optimization
-  const createVirtualizedList = useCallback(<T>(
-    items: T[],
-    itemHeight: number,
-    containerHeight: number,
-    renderItem: (item: T, index: number) => ReactNode
-  ) => {
-    if (!enableVirtualization || items.length < virtualizationThreshold) {
-      return { type: 'standard', items: items.map((item, index) => renderItem(item, index)) }
-    }
-    
-    const visibleCount = Math.ceil(containerHeight / itemHeight)
-    const startIndex = Math.floor(window.scrollY / itemHeight)
-    const endIndex = Math.min(startIndex + visibleCount, items.length)
-    
-    const visibleItems = items.slice(startIndex, endIndex)
-    const totalHeight = items.length * itemHeight
-    const offsetY = startIndex * itemHeight
-    
-    const optimization = `Virtualization applied to list with ${items.length} items`
-    setOptimizations(prev => [...prev, optimization])
-    callbacks.onOptimizationApplied?.('virtualization', 'VirtualizedList')
-    
-    return {
-      type: 'virtualized',
-      visibleItems: visibleItems.map((item, index) => renderItem(item, startIndex + index)),
-      totalHeight,
-      offsetY,
-      startIndex,
-      endIndex
-    }
-  }, [enableVirtualization, virtualizationThreshold, callbacks])
-
-  // Auto-optimization suggestions
-  const suggestOptimizations = useCallback((renderTime: number) => {
-    const suggestions: string[] = []
-    
-    if (renderTime > memoizationThreshold) {
-      suggestions.push('Consider memoization for expensive computations')
-    }
-    
-    if (renderTime > performanceThreshold * 2) {
-      suggestions.push('Implement lazy loading for heavy components')
-    }
-    
-    if (renderTime > performanceThreshold * 3) {
-      suggestions.push('Use virtualization for large lists')
-    }
-    
-    if (renderTime > performanceThreshold * 4) {
-      suggestions.push('Consider code splitting and dynamic imports')
-    }
-    
-    setOptimizations(prev => [...prev, ...suggestions])
-  }, [memoizationThreshold, performanceThreshold])
-
-  // Performance analysis
-  const analyzePerformance = useCallback(() => {
-    const analysis = {
-      isOptimized: metrics.optimizationLevel !== 'none',
-      needsOptimization: metrics.renderTime > performanceThreshold,
-      optimizationScore: Math.max(0, 100 - (metrics.renderTime / performanceThreshold) * 100),
-      recommendations: [] as string[]
-    }
-    
-    if (metrics.renderTime > performanceThreshold) {
-      analysis.recommendations.push('Render time exceeds 60fps threshold')
-    }
-    
-    if (metrics.reRenderCount > 10) {
-      analysis.recommendations.push('High re-render count detected')
-    }
-    
-    if (metrics.memoryUsage > 50) {
-      analysis.recommendations.push('High memory usage detected')
-    }
-    
-    return analysis
-  }, [metrics, performanceThreshold])
-
-  // Memory usage monitoring
-  const checkMemoryUsage = useCallback(() => {
-    if (!enablePerformanceMonitoring) return
-    
-    try {
-      // Simulate memory usage check
-      const memoryUsage = Math.random() * 100
-      
-      setMetrics(prev => ({
-        ...prev,
-        memoryUsage
-      }))
-      
-      if (memoryUsage > 80) {
-        callbacks.onMemoryWarning?.(memoryUsage)
-      }
-    } catch (error) {
-      console.warn('Memory usage check failed:', error)
-    }
-  }, [enablePerformanceMonitoring, callbacks])
-
-  // Performance improvement tracking
-  const trackImprovement = useCallback((before: number, after: number) => {
-    const improvement = ((before - after) / before) * 100
-    
-    if (improvement > 0) {
-      callbacks.onPerformanceImproved?.(improvement)
-      
-      setMetrics(prev => ({
-        ...prev,
-        optimizationLevel: improvement > 50 ? 'high' : improvement > 25 ? 'medium' : 'low',
-        lastOptimization: `Improved by ${improvement.toFixed(1)}%`
-      }))
-    }
-  }, [callbacks])
-
-  // Auto-optimization
-  const autoOptimize = useCallback((componentId: string) => {
-    if (!enableAutoOptimization) return
-    
-    setIsOptimizing(true)
-    
-    setTimeout(() => {
-      const optimizations = [
-        `Auto-optimization applied to ${componentId}`,
-        'Performance monitoring enabled',
-        'Memory usage tracking active',
-        'Render time optimization applied'
-      ]
-      
-      setOptimizations(prev => [...prev, ...optimizations])
-      setIsOptimizing(false)
-      
-      callbacks.onOptimizationApplied?.('auto-optimization', componentId)
-    }, 300)
-  }, [enableAutoOptimization, callbacks])
-
-  // Performance benchmarking
-  const benchmarkComponent = useCallback((
-    componentId: string,
-    benchmarkFn: () => void,
-    iterations: number = 100
-  ) => {
-    const startTime = performance.now()
-    
-    for (let i = 0; i < iterations; i++) {
-      benchmarkFn()
-    }
-    
-    const endTime = performance.now()
-    const averageTime = (endTime - startTime) / iterations
-    
-    const benchmark = `Benchmark: ${componentId} - ${averageTime.toFixed(2)}ms average`
-    setOptimizations(prev => [...prev, benchmark])
-    
-    return averageTime
-  }, [])
-
-  // Initialize performance monitoring
-  useEffect(() => {
-    if (!enablePerformanceMonitoring) return
-
-    try {
-      performanceTimerRef.current = window.setInterval(() => {
-        checkMemoryUsage()
-      }, 5000)
-      
-      return () => {
-        if (performanceTimerRef.current) {
-          clearInterval(performanceTimerRef.current)
+     } = config;
+    const [metrics, setMetrics] = useState({
+        renderTime: 0,
+        memoryUsage: 0,
+        reRenderCount: 0,
+        optimizationLevel: 'none',
+        lastOptimization: 'none'
+    });
+    const [isOptimizing, setIsOptimizing] = useState(false);
+    const [optimizations, setOptimizations] = useState([]);
+    const [memoizedValues] = useState(new Map());
+    const [lazyComponents] = useState(new Map());
+    const renderStartTimeRef = useRef(0);
+    const renderCountRef = useRef(0);
+    const performanceTimerRef = useRef(null);
+    const memoryCheckIntervalRef = useRef(null);
+    // Performance monitoring
+    const startRenderMeasurement = useCallback(() => {
+        if (!enablePerformanceMonitoring)
+            return () => { };
+        renderStartTimeRef.current = performance.now();
+        renderCountRef.current++;
+        return () => {
+            const renderTime = performance.now() - renderStartTimeRef.current;
+            setMetrics(prev => ({
+                ...prev,
+                renderTime,
+                reRenderCount: renderCountRef.current
+            }));
+            // Check if optimization is needed
+            if (renderTime > performanceThreshold && enableAutoOptimization) {
+                suggestOptimizations(renderTime);
+            }
+        };
+    }, [enablePerformanceMonitoring, enableAutoOptimization, performanceThreshold]);
+    // Memoization optimization
+    const memoizeValue = useCallback((key, value, dependencies) => {
+        if (!enableMemoization)
+            return value;
+        const dependencyKey = JSON.stringify(dependencies);
+        const memoKey = `${key}-${dependencyKey}`;
+        if (memoizedValues.has(memoKey)) {
+            return memoizedValues.get(memoKey);
+        }
+        memoizedValues.set(memoKey, value);
+        const optimization = `Memoization applied to ${key}`;
+        setOptimizations(prev => [...prev, optimization]);
+        callbacks.onOptimizationApplied?.('memoization', key);
+        return value;
+    }, [enableMemoization, memoizedValues, callbacks]);
+    // Lazy loading optimization
+    const lazyLoadComponent = useCallback((componentId, componentLoader) => {
+        if (!enableLazyLoading)
+            return null;
+        if (lazyComponents.has(componentId)) {
+            return lazyComponents.get(componentId);
+        }
+        const LazyComponent = React.lazy(componentLoader);
+        lazyComponents.set(componentId, LazyComponent);
+        const optimization = `Lazy loading applied to ${componentId}`;
+        setOptimizations(prev => [...prev, optimization]);
+        callbacks.onOptimizationApplied?.('lazy-loading', componentId);
+        return LazyComponent;
+    }, [enableLazyLoading, lazyComponents, callbacks]);
+    // Virtualization optimization
+    const createVirtualizedList = useCallback((items, itemHeight, containerHeight, renderItem) => {
+        if (!enableVirtualization || items.length < virtualizationThreshold) {
+            return { type: 'standard', items: items.map((item, index) => renderItem(item, index)) };
+        }
+        const visibleCount = Math.ceil(containerHeight / itemHeight);
+        const startIndex = Math.floor(window.scrollY / itemHeight);
+        const endIndex = Math.min(startIndex + visibleCount, items.length);
+        const visibleItems = items.slice(startIndex, endIndex);
+        const totalHeight = items.length * itemHeight;
+        const offsetY = startIndex * itemHeight;
+        const optimization = `Virtualization applied to list with ${items.length} items`;
+        setOptimizations(prev => [...prev, optimization]);
+        callbacks.onOptimizationApplied?.('virtualization', 'VirtualizedList');
+        return {
+            type: 'virtualized',
+            visibleItems: visibleItems.map((item, index) => renderItem(item, startIndex + index)),
+            totalHeight,
+            offsetY,
+            startIndex,
+            endIndex
+        };
+    }, [enableVirtualization, virtualizationThreshold, callbacks]);
+    // Auto-optimization suggestions
+    const suggestOptimizations = useCallback((renderTime) => {
+        const suggestions = [];
+        if (renderTime > memoizationThreshold) {
+            suggestions.push('Consider memoization for expensive computations');
+        }
+        if (renderTime > performanceThreshold * 2) {
+            suggestions.push('Implement lazy loading for heavy components');
+        }
+        if (renderTime > performanceThreshold * 3) {
+            suggestions.push('Use virtualization for large lists');
+        }
+        if (renderTime > performanceThreshold * 4) {
+            suggestions.push('Consider code splitting and dynamic imports');
+        }
+        setOptimizations(prev => [...prev, ...suggestions]);
+    }, [memoizationThreshold, performanceThreshold]);
+    // Performance analysis
+    const analyzePerformance = useCallback(() => {
+        const analysis = {
+            isOptimized: metrics.optimizationLevel !== 'none',
+            needsOptimization: metrics.renderTime > performanceThreshold,
+            optimizationScore: Math.max(0, 100 - (metrics.renderTime / performanceThreshold) * 100),
+            recommendations: []
+        };
+        if (metrics.renderTime > performanceThreshold) {
+            analysis.recommendations.push('Render time exceeds 60fps threshold');
+        }
+        if (metrics.reRenderCount > 10) {
+            analysis.recommendations.push('High re-render count detected');
         }
-      }
-    } catch (error) {
-      console.warn('Performance monitoring initialization failed:', error)
-    }
-  }, [enablePerformanceMonitoring, checkMemoryUsage])
-
-  // Cleanup on unmount
-  useEffect(() => {
-    return () => {
-      if (memoryCheckIntervalRef.current) {
-        clearInterval(memoryCheckIntervalRef.current)
-      }
-    }
-  }, [])
-
-  return {
-    // State
-    metrics,
-    isOptimizing,
-    optimizations,
-    
-    // Performance measurement
-    startRenderMeasurement,
-    benchmarkComponent,
-    
-    // Optimization functions
-    memoizeValue,
-    lazyLoadComponent,
-    createVirtualizedList,
-    autoOptimize,
-    
-    // Analysis
-    analyzePerformance,
-    trackImprovement,
-    
-    // Utility functions
-    isPerformanceOptimized: () => metrics.optimizationLevel !== 'none',
-    getOptimizationLevel: () => metrics.optimizationLevel,
-    getPerformanceScore: () => Math.max(0, 100 - (metrics.renderTime / performanceThreshold) * 100),
-    clearOptimizations: () => setOptimizations([])
-  }
-}
-
-export default useComponentPerformance
+        if (metrics.memoryUsage > 50) {
+            analysis.recommendations.push('High memory usage detected');
+        }
+        return analysis;
+    }, [metrics, performanceThreshold]);
+    // Memory usage monitoring
+    const checkMemoryUsage = useCallback(() => {
+        if (!enablePerformanceMonitoring)
+            return;
+        try {
+            // Simulate memory usage check
+            const memoryUsage = Math.random() * 100;
+            setMetrics(prev => ({
+                ...prev,
+                memoryUsage
+            }));
+            if (memoryUsage > 80) {
+                callbacks.onMemoryWarning?.(memoryUsage);
+            }
+        }
+        catch (error) {
+            console.warn('Memory usage check failed:', error);
+        }
+    }, [enablePerformanceMonitoring, callbacks]);
+    // Performance improvement tracking
+    const trackImprovement = useCallback((before, after) => {
+        const improvement = ((before - after) / before) * 100;
+        if (improvement > 0) {
+            callbacks.onPerformanceImproved?.(improvement);
+            setMetrics(prev => ({
+                ...prev,
+                optimizationLevel: improvement > 50 ? 'high' : improvement > 25 ? 'medium' : 'low',
+                lastOptimization: `Improved by ${improvement.toFixed(1)}%`
+            }));
+        }
+    }, [callbacks]);
+    // Auto-optimization
+    const autoOptimize = useCallback((componentId) => {
+        if (!enableAutoOptimization)
+            return;
+        setIsOptimizing(true);
+        setTimeout(() => {
+            const optimizations = [
+                `Auto-optimization applied to ${componentId}`,
+                'Performance monitoring enabled',
+                'Memory usage tracking active',
+                'Render time optimization applied'
+            ];
+            setOptimizations(prev => [...prev, ...optimizations]);
+            setIsOptimizing(false);
+            callbacks.onOptimizationApplied?.('auto-optimization', componentId);
+        }, 300);
+    }, [enableAutoOptimization, callbacks]);
+    // Performance benchmarking
+    const benchmarkComponent = useCallback((componentId, benchmarkFn, iterations = 100) => {
+        const startTime = performance.now();
+        for (let i = 0; i < iterations; i++) {
+            benchmarkFn();
+        }
+        const endTime = performance.now();
+        const averageTime = (endTime - startTime) / iterations;
+        const benchmark = `Benchmark: ${componentId} - ${averageTime.toFixed(2)}ms average`;
+        setOptimizations(prev => [...prev, benchmark]);
+        return averageTime;
+    }, []);
+    // Initialize performance monitoring
+    useEffect(() => {
+        if (!enablePerformanceMonitoring)
+            return;
+        try {
+            performanceTimerRef.current = window.setInterval(() => {
+                checkMemoryUsage();
+            }, 5000);
+            return () => {
+                if (performanceTimerRef.current) {
+                    clearInterval(performanceTimerRef.current);
+                }
+            };
+        }
+        catch (error) {
+            console.warn('Performance monitoring initialization failed:', error);
+        }
+    }, [enablePerformanceMonitoring, checkMemoryUsage]);
+    // Cleanup on unmount
+    useEffect(() => {
+        return () => {
+            if (memoryCheckIntervalRef.current) {
+                clearInterval(memoryCheckIntervalRef.current);
+            }
+        };
+    }, []);
+    return {
+        // State
+        metrics,
+        isOptimizing,
+        optimizations,
+        // Performance measurement
+        startRenderMeasurement,
+        benchmarkComponent,
+        // Optimization functions
+        memoizeValue,
+        lazyLoadComponent,
+        createVirtualizedList,
+        autoOptimize,
+        // Analysis
+        analyzePerformance,
+        trackImprovement,
+        // Utility functions
+        isPerformanceOptimized: () => metrics.optimizationLevel !== 'none',
+        getOptimizationLevel: () => metrics.optimizationLevel,
+        getPerformanceScore: () => Math.max(0, 100 - (metrics.renderTime / performanceThreshold) * 100),
+        clearOptimizations: () => setOptimizations([])
+    };
+};
+export default useComponentPerformance;