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)
This demo uses an embedded StackBlitz sandbox. Load it inline or open it in a new tab.
Open demo in StackBlitzCode example
import {useRenderBudget} from 'react-perf-hooks';
export function PricingGrid() {
useRenderBudget(16, 'PricingGrid', {strict: false});
return <section>...</section>;
}