Docs
Render Count

Render Count

Identify unnecessary re-renders and monitor update frequency

About

The useRenderCount hook tracks the number of times a component renders or re-renders. Each render increments the count value, providing insights into the render frequency of your components, helpful for optimizing performance, identifying unnecessary re-renders, or monitoring component updates.

Return Values

NameTypeDescription
renderCountnumberThe number of times the component has rendered.

Installation

Run the following command:

npx scriptkavi-hooks@latest add render-count

Usage

import { useRenderCount } from "@/hooks/render-count"
import * as React from "react"
 
export default function App() {
  const renderCount = useRenderCount()
  const [count, setCount] = React.useState(0)
 
  return (
    <section>
      <header>
        <h1>useRenderCount</h1>
        <h6>(strict mode on)</h6>
      </header>
      <button className="primary" onClick={() => setCount((c) => c + 1)}>
        Increment
      </button>
      <p>Count: {count}</p>
      <p>Render Count: {renderCount}</p>
    </section>
  )
}
QueueRender Info