Docs
useRenderCount
Identify unnecessary re-renders and monitor update frequency with useRenderCount.
Loading...
Installation
pnpm dlx shadcn@latest add https://usekit.kiron.dev/k/use-render-count
Usage
"use client"
import * as React from "react"
import { useRenderCount } from "@/hooks/use-render-count"
export function Component() {
const { count, isStrictMode } = useRenderCount()
const [numberCount, setNumberCount] = React.useState(0)
return (
<section>
<header>
<h1>useRenderCount</h1>
<h6>Strict Mode: {isStrictMode ? "Enabled" : "Disabled"}</h6>
</header>
<button className="primary" onClick={() => setNumberCount((c) => c + 1)}>
Increment
</button>
<p>Count: {numberCount}</p>
<p>Render Count: {renderCount}</p>
</section>
)
}
API Reference
Return Values
Name | Type | Description |
---|---|---|
renderCount | React.RefObject<T> | The total number of times the component has rendered. |