How to implement performance monitoring in React?

Question

Accepted Answer

**Performance monitoring** tracks and optimizes app performance.

**Web Vitals:**
```tsx
import { useEffect } from "react";
import { onCLS, onFID, onLCP } from "web-vitals";

function reportWebVitals(metric) {
  console.log(metric);
  // Send to analytics
  analytics.track("web-vital", {
    name: metric.name,
    value: metric.value,
    id: metric.id,
  });
}

// In _app.tsx or layout.tsx
export function reportWebVitals(metric) {
  switch (metric.name) {
    case "CLS": reportCLS(metric); break;
    case "FID": reportFID(metric); break;
    case "LCP": reportLCP(metric); break;
  }
}
```

**Custom performance hook:**
```tsx
function usePerformanceMonitor(name: string) {
  useEffect(() => {
    const start = performance.now();

return () => {
      const duration = performance.now() - start;
      if (duration > 100) {
        console.warn(`Slow render: ${name} took ${duration}ms`);
      }
    };
  }, [name]);
}

// Usage
function ExpensiveComponent() {
  usePerformanceMonitor("ExpensiveComponent");
  // ... render
}
```

**React DevTools Profiler:**
1. Record performance profile
2. Analyze flamegraph
3. Identify slow renders
4. Check why components re-render

**Best practices:**
- Monitor Core Web Vitals
- Set performance budgets
- Use Lighthouse CI
- Track real user metrics (RUM)

React: How to implement performance monitoring in React?