useRenderTracker
Description and use case
useRenderTracker helps identify components that render too often and why. Pass tracked props to log changed keys and optionally trigger warnings when a render threshold is reached.
API signature
function useRenderTracker(
props?: Record<string, unknown>,
options?: UseRenderTrackerOptions
): RenderInfo
Parameters
| Name | Type | Required | Description |
|---|---|---|---|
props | Record<string, unknown> | No | Object to diff against previous render using Object.is per key. |
options.name | string | No | Label in console output. Defaults to "Component". |
options.enabled | boolean | No | Enable/disable tracking (dev true, prod false by default). |
options.warnAt | number | No | Warn once render count reaches threshold. |
Return value
| Field | Type | Description |
|---|---|---|
count | number | Total render count while tracking is enabled. |
lastRenderTime | number | performance.now() timestamp of latest render. |
Live interactive demo (StackBlitz)
This demo uses an embedded StackBlitz sandbox. Load it inline or open it in a new tab.
Open demo in StackBlitzCode example
import {useRenderTracker} from 'react-perf-hooks';
type Props = {
userId: string;
filters: Record<string, string>;
};
export function UserTable({userId, filters}: Props) {
const {count} = useRenderTracker({userId, filters}, {name: 'UserTable', warnAt: 10});
return <p>Render count: {count}</p>;
}