Skip to main content

Performance View

Analyze and optimize component render performance.

Overview​

The Performance View provides detailed metrics and visualizations of component render performance, helping you identify bottlenecks.

API​

import { PerformanceView } from 'react-dev-debugger/ui';

<PerformanceView
  showRenderCount={true}
  showRenderTime={true}
  showFlameGraph={true}
  warnThreshold={50}
  sortBy="renderCount" // or "renderTime", "lastRender"
/>

Basic Example​

import { PerformanceView } from 'react-dev-debugger/ui';

function DebugPanel() {
  return (
    <div>
      <h2>Performance Metrics</h2>
      <PerformanceView
        showFlameGraph={true}
        warnThreshold={30}
      />
    </div>
  );
}

Features​

  • Render Count: How many times each component rendered
  • Render Time: Time taken for each render
  • Flame Graph: Visual performance profile
  • Performance Warnings: Alert on excessive renders
  • Comparison Mode: Compare before/after optimization
  • Export Data: Export metrics for analysis

Metrics​

Live Playground​

Performance Controls

Total Renders: 33

Performance Metrics

TodoList ⚠️
8 renders25ms avg
Last: 30msTotal: 200ms
App
5 renders12ms avg
Last: 15msTotal: 60ms
Sidebar
2 renders5ms avg
Last: 6msTotal: 10ms
Counter
15 renders4ms avg
Last: 5msTotal: 60ms
Header
3 renders3ms avg
Last: 2msTotal: 9ms
Summary
Total Components: 5
Slow Renders: 1
Avg Time: 10ms
Total Time: 339ms

PerformanceView Usage Example

import { PerformanceView } from 'react-dev-debugger/ui';

function DebugPanel() {
  return (
    <PerformanceView
      showRenderCount={true}
      showRenderTime={true}
      showFlameGraph={true}
      warnThreshold={20}
      sortBy="renderTime"
      onComponentClick={(component) => {
        console.log('Clicked:', component);
      }}
    />
  );
}

Component Metrics​

<PerformanceView
  metrics={[
    'renderCount',
    'avgRenderTime',
    'maxRenderTime',
    'totalRenderTime',
    'lastRender',
  ]}
  showPercentiles={true}
/>

Flame Graph​

Visualize render hierarchy:

<PerformanceView
  view="flamegraph"
  colorScheme="performance" // red=slow, green=fast
  minDuration={1} // Hide renders < 1ms
/>

Optimization Tips​

The view provides suggestions:

  • Components rendering too often
  • Slow render durations
  • Missing memoization opportunities
  • Unnecessary prop updates

Next Steps​