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

```javascript 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

```bash 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!