54 lines
1.4 KiB
TypeScript
54 lines
1.4 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
|
|
interface PerformanceMetrics {
|
|
loadTime: number;
|
|
renderTime: number;
|
|
memoryUsage?: number;
|
|
}
|
|
|
|
export const usePerformanceMonitor = (componentName: string) => {
|
|
const [metrics, setMetrics] = useState<PerformanceMetrics | null>(null);
|
|
|
|
useEffect(() => {
|
|
const startTime = performance.now();
|
|
|
|
// Monitor memory usage if available
|
|
const getMemoryUsage = () => {
|
|
if ('memory' in performance) {
|
|
return (performance as any).memory.usedJSHeapSize / 1024 / 1024; // MB
|
|
}
|
|
return undefined;
|
|
};
|
|
|
|
const measurePerformance = () => {
|
|
const endTime = performance.now();
|
|
const loadTime = endTime - startTime;
|
|
|
|
setMetrics({
|
|
loadTime,
|
|
renderTime: loadTime,
|
|
memoryUsage: getMemoryUsage()
|
|
});
|
|
|
|
// Log performance metrics in development
|
|
if (process.env.NODE_ENV === 'development') {
|
|
console.log(`Performance metrics for ${componentName}:`, {
|
|
loadTime: `${loadTime.toFixed(2)}ms`,
|
|
memoryUsage: getMemoryUsage() ? `${getMemoryUsage()?.toFixed(2)}MB` : 'N/A'
|
|
});
|
|
}
|
|
};
|
|
|
|
// Use requestAnimationFrame to measure after render
|
|
const rafId = requestAnimationFrame(measurePerformance);
|
|
|
|
return () => {
|
|
cancelAnimationFrame(rafId);
|
|
};
|
|
}, [componentName]);
|
|
|
|
return metrics;
|
|
};
|
|
|
|
export default usePerformanceMonitor;
|