Overview
ThePerformanceMonitor component measures the render performance of its children using the Performance API. Use it to identify slow components and track performance regressions.
Props
The components to render and measure performance for.
Whether to measure and track render performance.
Name identifier for the component being measured. Used in performance tracking events.
Usage
Basic Usage
Monitor Expensive Components
Monitor Multiple Components
Conditional Monitoring
Performance Metrics
The component tracks performance using the format{componentName}-render:
- Render start time
- Render end time
- Total render duration
- Timestamp of measurement
Behavior
- Measures performance on every render when
measureRenderis true - Uses the browser’s Performance API for accurate timing
- Automatically starts measurement on mount
- Ends measurement on unmount
- Does not affect the rendering of children
- Renders children in a React Fragment (no extra DOM elements)
Performance Tracking Hook
Under the hood,PerformanceMonitor uses the usePerformanceTracking hook which provides:
measureCustomPerformance(name)- Returns a measurement object withstart()andend()methods- Automatic cleanup of measurements
- Integration with your analytics backend
Use Cases
- Identify slow-rendering components
- Track performance regressions in production
- Monitor the impact of code changes on render time
- A/B test performance of different implementations
- Set performance budgets and alerts
- Optimize critical user paths
- Debug performance issues in specific features
Best Practices
Name Components Clearly
Monitor Critical Paths
Enable in Production Carefully
Notes
- Performance monitoring has minimal overhead but may not be suitable for all components in production
- Consider sampling (only measuring a percentage of renders) in production
- The Performance API is available in all modern browsers
- Measurements are affected by device performance and other running processes