What is the React Profiler and how do you use it to diagnose performance issues?

The React DevTools Profiler helps identify slow renders and unnecessary re-renders.

Using React DevTools Profiler:

1. Open DevTools → Profiler tab
2. Click Record, interact with the app, stop recording
3. See flame chart showing each render by component and duration
4. Click a bar to see why it rendered: props changed, hook changed, parent rendered

The Profiler API for automated performance testing:

import { Profiler } from 'react';

function onRenderCallback(
  id,           // tree id (prop)
  phase,        // "mount" | "update" | "nested-update"
  actualDuration, // time spent rendering committed update
  baseDuration,   // estimated time without memoization
  startTime,
  commitTime
) {
  if (actualDuration > 16) { // over one 60fps frame
    console.warn(`Slow render in ${id}: ${actualDuration}ms`);
  }
}

function App() {
  return (
    
      
    
  );
}

What to look for:

• Components that render when they shouldn't (add React.memo)
• baseDuration >> actualDuration → memoization is working
• actualDuration consistently high → expensive render, consider useMemo