Skip to main content

Render Tracker

Track component render performance, frequency, and patterns.

Overview​

The Render Tracker monitors component renders to help identify performance bottlenecks and unnecessary re-renders.

API​

import { RenderTracker } from 'react-dev-debugger';

const tracker = new RenderTracker({
  warnThreshold: 50,
  trackProps: true,
  trackTime: true,
});

// Track component
tracker.track(componentName);

// Get statistics
const stats = tracker.getStats(componentName);

// Reset tracking
tracker.reset();

Basic Example​

import { RenderTracker } from 'react-dev-debugger';

const tracker = new RenderTracker();

function MyComponent() {
  tracker.track('MyComponent');

  return <div>Component Content</div>;
}

Live Playground​

Render Tracking

Component A
Renders: 1 | Last: 0.00ms
Component B
Renders: 1 | Last: 0.00ms
Component C
Renders: 1 | Last: 0.00ms
Tracker Configuration
const tracker = new RenderTracker({
  warnThreshold: 10,
  trackProps: true,
  trackTime: true,
});

tracker.track('MyComponent');

Performance Metrics

Component A
Render Count:0
Total Time:0.00ms
Average Time:0.00ms
Last Render:0.00ms
Component B
Render Count:0
Total Time:0.00ms
Average Time:0.00ms
Last Render:0.00ms
Component C
Render Count:0
Total Time:0.00ms
Average Time:0.00ms
Last Render:0.00ms

Tracking Features:

  • Count component renders
  • Measure render time
  • Calculate averages
  • Warn on excessive renders
  • Performance statistics

Optimization Tips:

  • Use React.memo for pure components
  • Memoize callbacks with useCallback
  • Memoize values with useMemo
  • Split large components

Features​

  • Render Count: Track how many times components render
  • Render Time: Measure render duration
  • Performance Warnings: Alert on excessive renders
  • Render Reasons: Identify what caused re-renders
  • Statistics: Aggregate render data

Next Steps​