Skip to main content

Overview

The PerformanceMonitor component measures the render performance of its children using the Performance API. Use it to identify slow components and track performance regressions.

Props

children
ReactNode
required
The components to render and measure performance for.
measureRender
boolean
default:true
Whether to measure and track render performance.
componentName
string
default:"unknown"
Name identifier for the component being measured. Used in performance tracking events.

Usage

Basic Usage

import { PerformanceMonitor } from 'mentiq-sdk';

function Dashboard() {
  return (
    <PerformanceMonitor
      componentName="dashboard"
      measureRender={true}
    >
      <DashboardContent />
    </PerformanceMonitor>
  );
}

Monitor Expensive Components

function DataTable({ data }) {
  return (
    <PerformanceMonitor componentName="data-table">
      <table>
        {data.map(row => (
          <tr key={row.id}>
            <td>{row.name}</td>
            <td>{row.value}</td>
          </tr>
        ))}
      </table>
    </PerformanceMonitor>
  );
}

Monitor Multiple Components

function App() {
  return (
    <>
      <PerformanceMonitor componentName="header">
        <Header />
      </PerformanceMonitor>
      
      <PerformanceMonitor componentName="sidebar">
        <Sidebar />
      </PerformanceMonitor>
      
      <PerformanceMonitor componentName="main-content">
        <MainContent />
      </PerformanceMonitor>
    </>
  );
}

Conditional Monitoring

function FeatureComponent({ enableMonitoring }) {
  return (
    <PerformanceMonitor
      componentName="feature"
      measureRender={enableMonitoring}
    >
      <ExpensiveFeature />
    </PerformanceMonitor>
  );
}

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 measureRender is 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 with start() and end() 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

<PerformanceMonitor componentName="product-grid-heavy-images">
  <ProductGrid />
</PerformanceMonitor>

Monitor Critical Paths

function CheckoutFlow() {
  return (
    <PerformanceMonitor componentName="checkout-flow">
      <StepIndicator />
      <PaymentForm />
      <OrderSummary />
    </PerformanceMonitor>
  );
}

Enable in Production Carefully

<PerformanceMonitor
  componentName="heavy-feature"
  measureRender={process.env.NODE_ENV === 'development' || Math.random() < 0.1}
>
  <HeavyFeature />
</PerformanceMonitor>

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

Build docs developers (and LLMs) love