useRenderCount

Identify unnecessary re-renders and monitor update frequency with useRenderCount.

Install:

npm i @uidotdev/usehooks

Description:

The useRenderCount hook is a useful tool for tracking the number of times a component renders or re-renders. Each time the component renders, the count value is incremented, allowing you to keep track of the render count. This can be helpful in optimizing performance, identifying unnecessary re-renders, or monitoring how frequently a component is being updated. The hook provides a simple and efficient way to gain insights into the rendering behavior of your components.

Return Value

NameTypeDescription
renderCountnumberThe number of times the component has rendered.

Demo:

Example:

import * as React from "react";
import { useRenderCount } from "@uidotdev/usehooks";

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>
  );
}

More Hooks:

Sort: