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
| Name | Type | Description |
|---|---|---|
| info | object | An object containing information about the component’s rendering. |
| info.name | string | The name of the component. |
| info.renders | number | The number of times the component has rendered. |
| info.sinceLastRender | number | The time elapsed in milliseconds since the last render. |
| info.timestamp | number | The timestamp of the current render. |
Demo:
Example:
import * as React from "react";
import { useRenderInfo } from "@uidotdev/usehooks";
export default function App() {
const info = useRenderInfo("App");
const [count, setCount] = React.useState(0);
return (
<section>
<h1>useRenderInfo</h1>
<button className="primary" onClick={() => setCount(count + 1)}>
Re-Render
</button>
<table>
<thead>
<tr>
<th colSpan={2}>Render Info</th>
</tr>
</thead>
<tbody>
{Object.keys(info).map((key) => {
return (
<tr key={key}>
<th>{key}</th>
<td>{info[key]}</td>
</tr>
);
})}
</tbody>
</table>
</section>
);
}