Overview
The usePerformanceTracking hook automatically tracks page load performance metrics (like load time, DOM ready, and paint metrics) and provides a method for measuring custom performance operations.
Usage
import { usePerformanceTracking } from 'mentiq-sdk';
function MyComponent() {
const { measureCustomPerformance } = usePerformanceTracking();
const handleHeavyOperation = () => {
const measure = measureCustomPerformance('data_processing');
measure?.start();
// Perform heavy operation
processLargeDataset();
measure?.end(); // Automatically tracked
};
return <button onClick={handleHeavyOperation}>Process Data</button>;
}
usePerformanceTracking automatically tracks the following page load metrics:
- Load Time: Total page load time
- DOM Ready: Time until DOM content is loaded
- First Paint: Time to first paint
- First Contentful Paint: Time to first contentful paint
These metrics are automatically sent as a performance_metrics event.
Returns
Create a performance measurement for custom operationsSignature: (label: string) => { start: () => void; end: () => void } | undefinedReturns an object with start() and end() methods, or undefined if the Performance API is not available.const { measureCustomPerformance } = usePerformanceTracking();
const measure = measureCustomPerformance('api_request');
measure?.start();
await fetchData();
measure?.end(); // Tracks event: "custom_performance" with duration
- Event Name:
"custom_performance"
- Properties:
{ [label]: duration_in_ms }
Type Definitions
interface PerformanceData {
loadTime?: number;
domReady?: number;
firstPaint?: number;
firstContentfulPaint?: number;
largestContentfulPaint?: number;
firstInputDelay?: number;
cumulativeLayoutShift?: number;
timeToInteractive?: number;
}
Examples
import { usePerformanceTracking } from 'mentiq-sdk';
function DataLoader() {
const { measureCustomPerformance } = usePerformanceTracking();
const loadData = async () => {
const measure = measureCustomPerformance('fetch_user_data');
measure?.start();
try {
const response = await fetch('/api/users');
const data = await response.json();
return data;
} finally {
measure?.end();
}
};
return <button onClick={loadData}>Load Data</button>;
}
Track Component Render Time
import { usePerformanceTracking } from 'mentiq-sdk';
import { useEffect, useRef } from 'react';
function ExpensiveComponent() {
const { measureCustomPerformance } = usePerformanceTracking();
const measureRef = useRef<ReturnType<typeof measureCustomPerformance>>(null);
useEffect(() => {
measureRef.current = measureCustomPerformance('expensive_component_render');
measureRef.current?.start();
return () => {
measureRef.current?.end();
};
}, [measureCustomPerformance]);
return (
<div>
{/* Complex rendering logic */}
</div>
);
}
import { usePerformanceTracking } from 'mentiq-sdk';
import { useEffect, useRef } from 'react';
function ImageGallery({ images }) {
const { measureCustomPerformance } = usePerformanceTracking();
const trackImageLoad = (imageName: string) => {
const measure = measureCustomPerformance(`image_load_${imageName}`);
return {
onLoadStart: () => measure?.start(),
onLoad: () => measure?.end()
};
};
return (
<div>
{images.map((img) => {
const tracker = trackImageLoad(img.name);
return (
<img
key={img.id}
src={img.url}
onLoadStart={tracker.onLoadStart}
onLoad={tracker.onLoad}
alt={img.name}
/>
);
})}
</div>
);
}
import { usePerformanceTracking } from 'mentiq-sdk';
import { useState } from 'react';
function ContactForm() {
const { measureCustomPerformance } = usePerformanceTracking();
const [isSubmitting, setIsSubmitting] = useState(false);
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
const measure = measureCustomPerformance('form_submission');
measure?.start();
setIsSubmitting(true);
try {
await submitForm(formData);
} finally {
measure?.end();
setIsSubmitting(false);
}
};
return (
<form onSubmit={handleSubmit}>
{/* Form fields */}
<button type="submit" disabled={isSubmitting}>
{isSubmitting ? 'Submitting...' : 'Submit'}
</button>
</form>
);
}
import { usePerformanceTracking } from 'mentiq-sdk';
import { useState, useCallback } from 'react';
import { debounce } from 'lodash';
function SearchBar() {
const { measureCustomPerformance } = usePerformanceTracking();
const [results, setResults] = useState([]);
const performSearch = useCallback(
debounce(async (query: string) => {
const measure = measureCustomPerformance('search_query');
measure?.start();
try {
const response = await fetch(`/api/search?q=${query}`);
const data = await response.json();
setResults(data);
} finally {
measure?.end();
}
}, 300),
[measureCustomPerformance]
);
return (
<div>
<input
type="search"
onChange={(e) => performSearch(e.target.value)}
placeholder="Search..."
/>
{/* Render results */}
</div>
);
}
Automatic Page Load Metrics
The following metrics are automatically tracked when the page loads:
Total time from navigation start to load event end (in milliseconds)
Time from navigation start to DOM content loaded (in milliseconds)
Time to first paint (in milliseconds)
Time to first contentful paint (in milliseconds)
Browser Compatibility
The Performance API is supported in all modern browsers but may not be available in older browsers or server-side rendering contexts. The hook gracefully handles these cases by returning undefined from measureCustomPerformance.
Notes
Use custom performance tracking to identify bottlenecks in your application. Track operations that might impact user experience, such as API calls, heavy computations, or large renders.
Performance measurements are automatically cleaned up after being recorded to prevent memory leaks. Each measurement creates marks (${label}-start and ${label}-end) that are cleared after the duration is calculated.
Automatic page load tracking only fires once when the page loads. If you navigate using a client-side router, page load metrics won’t be tracked again unless you reload the page.