React Performance Dashboard ⚡️

A lightweight, zero-configuration performance monitoring tool for React applications. It provides real-time visibility into FPS (Frames Per Second), Memory Usage, and Network Latency directly in the browser, decoupled from the main React render cycle.

🚀 Why Use This?

Most performance tools (like Chrome DevTools) are heavy and require context-switching. React Performance Dashboard is designed to be:

• Drop-in Ready: No complex setup, contexts, or providers.
• Lightweight: < 2KB (gzipped).
• Agnostic: Works with any React framework (Vite, Next.js, CRA).
• Draggable: Floating UI that stays out of your way.

📦 Installation

npm install @saikat786/react-perf-dashboard
# or
yarn add @saikat786/react-perf-dashboard

🛠 Usage

Import the component and place it at the root of your application (usually App.tsx or layout.tsx).

import React from 'react';
import { PerfDashboard } from '@saikat786/react-perf-dashboard';

function App() {
  return (
    <>
      <PerfDashboard />
      <YourApplication />
    </>
  );
}

export default App;

📊 Metrics Tracked

| Metric | Description | Technical Implementation | | :--- | :--- | :--- | | FPS (Frames Per Second) | Tracks real-time rendering performance. | Uses a decoupled requestAnimationFrame loop to calculate frame deltas, ensuring it measures the browser's paint rate without blocking the main thread. | | Memory Usage | Monitors the JS Heap size (Used vs. Limit). | Accesses the window.performance.memory API (Chrome/Edge specific) to visualize memory pressure in real-time. | | Network Requests | Visualizes active API calls and latency. | Monkey-patches window.fetch to intercept requests, capturing duration, status codes, and endpoints non-intrusively. |

🧠 How It Works (Architecture)

This library is architected to minimize its own impact on your application's performance.

Event Loop Isolation: The FPS counter runs in a decoupled requestAnimationFrame loop, ensuring it measures the browser's painting capability rather than React's render cycle.

Fetch Interception: Instead of requiring a custom Axios instance, the library wraps the native window.fetch prototype. This allows it to capture network metrics from any library or component automatically.

Memory Safety: DOM listeners for dragging are attached globally (window) but cleaned up strictly on unmount to prevent memory leaks.

🤝 Contributing

• Contributions are welcome! Please feel free to submit a Pull Request.

• Fork the Project

• Create your Feature Branch (git checkout -b feature/AmazingFeature)

• Commit your Changes (git commit -m 'Add some AmazingFeature')

• Push to the Branch (git push origin feature/AmazingFeature)

• Open a Pull Request

📝 License

Distributed under the MIT License. See LICENSE for more information.

Built with ❤️ by Saikat Bishal