react-use-perf-monitor

A lightweight React hook library for monitoring component performance (render times) in development mode only. Ideal for identifying unnecessary re-renders and optimizing React applications.

Features

• 🔹 Easy-to-use React hook for performance monitoring
• 🔹 Only runs in development mode (no production overhead)
• 🔹 Fully typed with TypeScript
• 🔹 Supports both CommonJS and ES Modules

Installation

npm install react-use-perf-monitor

or using pnpm:

pnpm add react-use-perf-monitor

Usage

import React from "react";
import { usePerfMonitor } from "react-use-perf-monitor";

function MyComponent() {
  // Track performance for this component
  usePerfMonitor("MyComponent");

  return <div>Hello World</div>;
}

export default MyComponent;

• The hook logs render times in the console.
• Only active when process.env.NODE_ENV === "development".

API

usePerfMonitor(name: string)

• name: string — A descriptive name for the component being monitored.
• Returns: void — The hook has no return value, it only logs performance metrics.

Development

If you want to test the hook locally:

git clone https://github.com/kcabhish/react-use-perf-monitor.git
cd react-use-perf-monitor
npm install
npm run build

Contributing

Contributions are welcome! Please open an issue or submit a pull request.

License

MIT © Abhishek KC