usePerformanceMark
Description and use case
usePerformanceMark creates named marks and measures duration between them. Use it for precise timing of fetches, rendering paths, and user interactions.
API signature
function usePerformanceMark(namespace?: string): UsePerformanceMarkReturn;
Parameters
| Name | Type | Required | Description |
|---|---|---|---|
namespace | string | No | Optional prefix for mark/measure names to avoid collisions. |
Return value
| Field | Type | Description |
|---|---|---|
mark | (markName: string) => void | Creates a performance mark. |
measure | (measureName: string, startMark: string, endMark?: string) => PerformanceMeasureResult | null | Measures duration and returns result or null. |
clearMarks | (markName?: string) => void | Clears one or all marks. |
clearMeasures | (measureName?: string) => void | Clears one or all measures. |
getEntries | () => PerformanceMeasureResult[] | Returns collected measure entries for reporting. |
Live interactive demo (StackBlitz)
GitHub Pages does not serve the isolation headers required for embedded StackBlitz WebContainers. Open the demo in StackBlitz to run it interactively.
Code example
import { usePerformanceMark } from 'react-perf-hooks';
export function ProductList() {
const { mark, measure } = usePerformanceMark('ProductList');
async function loadProducts() {
mark('fetch-start');
await fetch('/api/products');
mark('fetch-end');
const result = measure('fetch-duration', 'fetch-start', 'fetch-end');
console.log(result?.duration);
}
return <button onClick={loadProducts}>Load</button>;
}