useRenderInfo

Debug renders and improve performance with useRenderInfo.

Install:

npm i @uidotdev/usehooks

Description:

The useRenderInfo hook is useful for tracking and logging rendering information in a component. It keeps track of the number of renders, the time elapsed since the last render, and the timestamp of the current render. This hook is particularly helpful during development as it provides insights into the rendering behavior of a component, allowing developers to optimize performance and identify potential issues.

Return Value

NameTypeDescription
infoobjectAn object containing information about the component’s rendering.
info.namestringThe name of the component.
info.rendersnumberThe number of times the component has rendered.
info.sinceLastRendernumberThe time elapsed in milliseconds since the last render.
info.timestampnumberThe timestamp of the current render.

Demo:

Example:

More Hooks:

Sort: