🔥 react-heatview

A real-time visual debugger for React components. Shows render frequency and prop/state diffs via overlays and heatmaps.

📦 Installation

npm install react-heatview

🧠 How It Works

• Tracks component renders using a custom hook.
• Highlights frequent re-renders with heatmaps.
• Shows prop/state changes in an overlay.
• Useful for debugging performance bottlenecks.

🚀 Usage

1. Wrap App

import { DebuggerProvider } from 'react-heatview';

<DebuggerProvider>
  <App />
</DebuggerProvider>

2. Track Components

Use either:

import { useComponentDebugger } from 'react-heatview';

function MyComponent(props) {
  const state = useMyHook();
  useComponentDebugger('MyComponent', props, state);
  return <div>...</div>;
}

Or use HOC:

import { withDebugger } from 'react-heatview';

const MyComponent = ({ count }) => <div>{count}</div>;
export default withDebugger(MyComponent, 'MyComponent');

3. Enable Overlay

import { DebugOverlay } from 'react-heatview';

<DebuggerProvider>
  <App />
  <DebugOverlay />
</DebuggerProvider>

⚙️ API

useComponentDebugger(name, props, state)

Tracks a component’s render and prop/state diffs.

withDebugger(Component, name)

Wraps any component and enables debugging.

DebuggerProvider

Global provider for debugger context.

DebugOverlay

Floating panel showing real-time changes.

🛠 Development

npm install
npm run dev

For production build:

npm run build

🧪 Testing

Use in a test app and verify overlays on render.

📁 Output

The build generates dist/main.js which is your library entry.

🧩 Features

• React 16.8+ Hooks support
• Overlay shows render reasons
• Real-time tracking using ResizeObserver
• Efficient object diffing

🧙‍♀️ Author

Built with ❤️ by Shweta Salunkhe