> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/AslamSDM/mentiq-sdk/llms.txt
> Use this file to discover all available pages before exploring further.

# PerformanceMonitor

> Component that measures and tracks render performance metrics

## 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

<ParamField path="children" type="ReactNode" required>
  The components to render and measure performance for.
</ParamField>

<ParamField path="measureRender" type="boolean" default={true}>
  Whether to measure and track render performance.
</ParamField>

<ParamField path="componentName" type="string" default="unknown">
  Name identifier for the component being measured. Used in performance tracking events.
</ParamField>

## Usage

### Basic Usage

```tsx theme={null}
import { PerformanceMonitor } from 'mentiq-sdk';

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

### Monitor Expensive Components

```tsx theme={null}
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

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

### Conditional Monitoring

```tsx theme={null}
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

```tsx theme={null}
<PerformanceMonitor componentName="product-grid-heavy-images">
  <ProductGrid />
</PerformanceMonitor>
```

### Monitor Critical Paths

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

### Enable in Production Carefully

```tsx theme={null}
<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