backsplash-app/src/recoil/usePerformanceMonitor.ts

An AI powered wallpaper app.

import { useEffect } from "react";

export const usePerformanceMonitor = (componentName: string) => {
  useEffect(() => {
    const startTime = performance.now();

    return () => {
      const endTime = performance.now();
      const duration = endTime - startTime;

      // Log performance metrics
      console.log(`[Performance] ${componentName} mounted for ${duration.toFixed(2)}ms`);

      // You could also send this to a monitoring service
      if (duration > 100) {
        // Threshold for slow components
        console.warn(`[Performance] ${componentName} took longer than expected: ${duration.toFixed(2)}ms`);
      }
    };
  }, [componentName]);
};