@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.1.4 → 0.1.5

package/src/hooks/use-memory-usage.ts

@@ -0,0 +1,287 @@
+import { useState, useEffect, useCallback, useRef, useMemo } from 'react'
+
+export interface MemoryMetrics {
+  usedJSHeapSize: number
+  totalJSHeapSize: number
+  jsHeapSizeLimit: number
+  memoryUsage: number
+  memoryPercentage: number
+  memoryTrend: 'increasing' | 'decreasing' | 'stable'
+  memoryLeakDetected: boolean
+  performanceScore: 'excellent' | 'good' | 'fair' | 'poor'
+}
+
+export interface MemoryThresholds {
+  warning: number
+  critical: number
+  excellent: number
+}
+
+export interface MemoryCallbacks {
+  onMemoryWarning?: (usage: number) => void
+  onMemoryCritical?: (usage: number) => void
+  onMemoryLeakDetected?: (trend: MemoryMetrics['memoryTrend']) => void
+  onPerformanceScoreChange?: (score: MemoryMetrics['performanceScore']) => void
+}
+
+export interface MemoryOptions {
+  updateInterval?: number
+  sampleSize?: number
+  thresholds?: Partial<MemoryThresholds>
+  callbacks?: MemoryCallbacks
+}
+
+const DEFAULT_THRESHOLDS: MemoryThresholds = {
+  warning: 0.7,
+  critical: 0.85,
+  excellent: 0.5
+}
+
+const DEFAULT_SAMPLE_SIZE = 10
+const MEMORY_LEAK_THRESHOLD = 0.1 // 10% increase over time
+
+export const useMemoryUsage = (options: MemoryOptions = {}) => {
+  const {
+    updateInterval = 2000,
+    sampleSize = DEFAULT_SAMPLE_SIZE,
+    thresholds = {},
+    callbacks = {}
+  } = options
+
+  const [metrics, setMetrics] = useState<MemoryMetrics>({
+    usedJSHeapSize: 0,
+    totalJSHeapSize: 0,
+    jsHeapSizeLimit: 0,
+    memoryUsage: 0,
+    memoryPercentage: 0,
+    memoryTrend: 'stable',
+    memoryLeakDetected: false,
+    performanceScore: 'excellent'
+  })
+
+  const [isMonitoring, setIsMonitoring] = useState(false)
+  const intervalIdRef = useRef<NodeJS.Timeout>()
+  const memoryHistoryRef = useRef<number[]>([])
+  const lastMemoryRef = useRef<number>(0)
+
+  // Merge default thresholds with custom ones
+  const finalThresholds = useMemo(() => ({
+    ...DEFAULT_THRESHOLDS,
+    ...thresholds
+  }), [thresholds])
+
+  // Calculate performance score based on memory usage
+  const calculatePerformanceScore = useCallback((usage: number): MemoryMetrics['performanceScore'] => {
+    if (usage <= finalThresholds.excellent) return 'excellent'
+    if (usage <= finalThresholds.warning) return 'good'
+    if (usage <= finalThresholds.critical) return 'fair'
+    return 'poor'
+  }, [finalThresholds])
+
+  // Detect memory trend
+  const detectMemoryTrend = useCallback((currentUsage: number, previousUsage: number): MemoryMetrics['memoryTrend'] => {
+    const difference = currentUsage - previousUsage
+    const percentageChange = Math.abs(difference) / previousUsage
+
+    if (percentageChange < 0.02) return 'stable'
+    if (difference > 0) return 'increasing'
+    return 'decreasing'
+  }, [])
+
+  // Detect potential memory leaks
+  const detectMemoryLeak = useCallback((_usage: number, history: number[]): boolean => {
+    if (history.length < 5) return false
+
+    // Check if memory usage is consistently increasing
+    const recentHistory = history.slice(-5)
+    const isConsistentlyIncreasing = recentHistory.every((value, index) => {
+      if (index === 0) return true
+      return value >= recentHistory[index - 1]
+    })
+
+    if (!isConsistentlyIncreasing) return false
+
+    // Check if the increase is significant
+    const firstValue = recentHistory[0]
+    const lastValue = recentHistory[recentHistory.length - 1]
+    const increase = (lastValue - firstValue) / firstValue
+
+    return increase > MEMORY_LEAK_THRESHOLD
+  }, [])
+
+  // Update memory information
+  const updateMemoryInfo = useCallback(() => {
+    if ('memory' in performance) {
+      const memory = (performance as any).memory
+      const usedJSHeapSize = memory.usedJSHeapSize
+      const totalJSHeapSize = memory.totalJSHeapSize
+      const jsHeapSizeLimit = memory.jsHeapSizeLimit
+      
+      const memoryUsage = usedJSHeapSize / jsHeapSizeLimit
+      const memoryPercentage = memoryUsage * 100
+
+      // Update memory history
+      memoryHistoryRef.current.push(memoryUsage)
+      if (memoryHistoryRef.current.length > sampleSize) {
+        memoryHistoryRef.current.shift()
+      }
+
+      // Detect memory trend
+      const memoryTrend = detectMemoryTrend(memoryUsage, lastMemoryRef.current)
+      
+      // Detect memory leaks
+      const memoryLeakDetected = detectMemoryLeak(memoryUsage, memoryHistoryRef.current)
+      
+      // Calculate performance score
+      const performanceScore = calculatePerformanceScore(memoryUsage)
+
+      const newMetrics: MemoryMetrics = {
+        usedJSHeapSize,
+        totalJSHeapSize,
+        jsHeapSizeLimit,
+        memoryUsage,
+        memoryPercentage,
+        memoryTrend,
+        memoryLeakDetected,
+        performanceScore
+      }
+
+      setMetrics(newMetrics)
+
+      // Check thresholds and call callbacks
+      if (memoryUsage >= finalThresholds.critical && callbacks.onMemoryCritical) {
+        callbacks.onMemoryCritical(memoryUsage)
+      } else if (memoryUsage >= finalThresholds.warning && callbacks.onMemoryWarning) {
+        callbacks.onMemoryWarning(memoryUsage)
+      }
+
+      if (memoryLeakDetected && callbacks.onMemoryLeakDetected) {
+        callbacks.onMemoryLeakDetected(memoryTrend)
+      }
+
+      // Check if performance score changed
+      if (performanceScore !== metrics.performanceScore && callbacks.onPerformanceScoreChange) {
+        callbacks.onPerformanceScoreChange(performanceScore)
+      }
+
+      lastMemoryRef.current = memoryUsage
+    }
+  }, [finalThresholds, callbacks, metrics.performanceScore, detectMemoryTrend, detectMemoryLeak, calculatePerformanceScore, sampleSize])
+
+  // Start monitoring
+  const startMonitoring = useCallback(() => {
+    if (isMonitoring) return
+
+    setIsMonitoring(true)
+    
+    // Initial memory check
+    updateMemoryInfo()
+    
+    // Set up interval for memory updates
+    intervalIdRef.current = setInterval(updateMemoryInfo, updateInterval)
+  }, [isMonitoring, updateMemoryInfo, updateInterval])
+
+  // Stop monitoring
+  const stopMonitoring = useCallback(() => {
+    setIsMonitoring(false)
+    
+    if (intervalIdRef.current) {
+      clearInterval(intervalIdRef.current)
+    }
+  }, [])
+
+  // Reset statistics
+  const resetStats = useCallback(() => {
+    memoryHistoryRef.current = []
+    lastMemoryRef.current = 0
+    setMetrics(prev => ({
+      ...prev,
+      memoryTrend: 'stable',
+      memoryLeakDetected: false
+    }))
+  }, [])
+
+  // Auto-start monitoring on mount
+  useEffect(() => {
+    startMonitoring()
+    return () => stopMonitoring()
+  }, [startMonitoring, stopMonitoring])
+
+  // Memory optimization recommendations
+  const getOptimizationRecommendations = useCallback(() => {
+    const recommendations: string[] = []
+    
+    if (metrics.memoryUsage >= finalThresholds.critical) {
+      recommendations.push('Critical memory usage - consider implementing memory cleanup and lazy loading')
+    } else if (metrics.memoryUsage >= finalThresholds.warning) {
+      recommendations.push('High memory usage - monitor for memory leaks and optimize resource usage')
+    }
+    
+    if (metrics.memoryLeakDetected) {
+      recommendations.push('Potential memory leak detected - investigate resource cleanup and event listeners')
+    }
+    
+    if (metrics.memoryTrend === 'increasing') {
+      recommendations.push('Memory usage is increasing - check for proper cleanup in useEffect and event handlers')
+    }
+    
+    if (metrics.memoryPercentage > 80) {
+      recommendations.push('Memory usage above 80% - consider implementing virtual scrolling or pagination')
+    }
+    
+    return recommendations
+  }, [metrics, finalThresholds])
+
+  // Memory cleanup suggestions
+  const getCleanupSuggestions = useCallback(() => {
+    const suggestions: string[] = []
+    
+    if (metrics.memoryLeakDetected) {
+      suggestions.push('Review useEffect cleanup functions')
+      suggestions.push('Check for unremoved event listeners')
+      suggestions.push('Verify proper cleanup in component unmount')
+      suggestions.push('Consider using AbortController for fetch requests')
+    }
+    
+    if (metrics.memoryTrend === 'increasing') {
+      suggestions.push('Implement proper cleanup in useEffect return functions')
+      suggestions.push('Review component lifecycle management')
+      suggestions.push('Check for circular references')
+    }
+    
+    return suggestions
+  }, [metrics])
+
+  return {
+    // Metrics
+    metrics,
+    
+    // Controls
+    startMonitoring,
+    stopMonitoring,
+    isMonitoring,
+    resetStats,
+    
+    // Performance analysis
+    performanceScore: metrics.performanceScore,
+    memoryTrend: metrics.memoryTrend,
+    memoryLeakDetected: metrics.memoryLeakDetected,
+    
+    // Optimization
+    getOptimizationRecommendations,
+    getCleanupSuggestions,
+    
+    // Raw values
+    usedJSHeapSize: metrics.usedJSHeapSize,
+    totalJSHeapSize: metrics.totalJSHeapSize,
+    jsHeapSizeLimit: metrics.jsHeapSizeLimit,
+    memoryUsage: metrics.memoryUsage,
+    memoryPercentage: metrics.memoryPercentage,
+    
+    // Thresholds
+    thresholds: finalThresholds,
+    
+    // History
+    memoryHistory: memoryHistoryRef.current
+  }
+}