React Performance Profiling

Use React Profiler to find performance issues.

React DevTools Profiler

1. Open React DevTools
2. Go to Profiler tab
3. Click Record
4. Interact with app
5. Stop recording
6. Analyze flame graph

Profiler API

import { Profiler } from 'react';

function onRenderCallback(
  id,
  phase,
  actualDuration,
  baseDuration,
  startTime,
  commitTime
) {
  console.log(`${id} took ${actualDuration}ms`);
}

<Profiler id="App" onRender={onRenderCallback}>
  <App />
</Profiler>

Chrome Performance Tab

1. Open DevTools
2. Go to Performance
3. Record
4. Stop
5. Analyze timeline

Lighthouse

npm install -g lighthouse
lighthouse http://localhost:3000

Key Metrics

• FCP (First Contentful Paint)
• LCP (Largest Contentful Paint)
• TTI (Time to Interactive)
• CLS (Cumulative Layout Shift)

Remember

• Profile before optimizing
• Focus on user experience
• Test on real devices
• Monitor in production

Next: Learn bundle optimization!