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

NameTypeDescription
renderCountReact.RefObject<T>The total number of times the component has rendered.