useRenderBudget
Description and use case
useRenderBudget measures render-to-commit duration and flags slow commits. It is useful for preventing gradual regressions in high-impact components.
API signature
function useRenderBudget(
budgetMs?: number,
componentName?: string,
options?: UseRenderBudgetOptions,
): void;
Parameters
| Name | Type | Required | Description |
|---|---|---|---|
budgetMs | number | No | Allowed render duration in ms. Defaults to 16. |
componentName | string | No | Name included in warnings/errors. |
options.enabled | boolean | No | Enable/disable measurement. |
options.strict | boolean | No | Throw error instead of warning when budget is exceeded. |
Return value
| Value | Type | Description |
|---|---|---|
| Return | void | This hook reports through side effects (warn/error), not return data. |
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 { useRenderBudget } from 'react-perf-hooks';
export function PricingGrid() {
useRenderBudget(16, 'PricingGrid', { strict: false });
return <section>...</section>;
}