React Component Usage Visualizer

Real-time React component analytics, render tracking, and performance monitoring - A powerful developer tool that provides live component usage visualization, render analytics, prop change tracking, and performance insights for both React.js and React Native applications.

Key Features

Real-time Component Analytics

• Live overlay dashboard - Interactive analytics panel with real-time updates
• Render count tracking - Monitor how many times each component renders
• Performance metrics - Total renders, averages, and efficiency insights
• Component usage heatmap - Visual representation of component activity

Advanced Debugging Tools

• Render reason inspector - Know why components re-render (props, state, context)
• Dependency chain visualization - See parent-child render relationships
• Hook activity tracker - Monitor useEffect, useMemo, useState triggers
• Unused component detector - Find components that never render

Cross-Platform Support

• React.js support - Full compatibility with web applications
• React Native support - Native mobile app analytics
• Auto platform detection - Automatically adapts to your environment
• Data export - Export analytics as JSON/CSV for further analysis

Quick Start

npm install react-component-usage-visualizer

import { useComponentUsage, UsageDashboard } from 'react-component-usage-visualizer';

function MyComponent() {
  useComponentUsage('MyComponent'); // Track this component
  return <div>Hello World</div>;
}

function App() {
  return (
    <div>
      <MyComponent />
      <UsageDashboard /> {/* Add the analytics dashboard */}
    </div>
  );
}

Why Choose This Package?

Unlike React DevTools or Storybook, this package provides:

• Real-time overlay - See analytics while your app runs
• Zero configuration - Just add one hook and one component
• Cross-platform - Works with React.js and React Native
• Performance focused - Built specifically for render optimization
• Developer friendly - Easy integration, comprehensive analytics

Installation

# Install the package
npm install react-component-usage-visualizer

# Or with yarn
yarn add react-component-usage-visualizer

# Or with pnpm
pnpm add react-component-usage-visualizer

Dashboard Preview

The package provides a beautiful, interactive dashboard that shows:

• Component render counts in real-time
• Performance metrics and optimization suggestions
• Visual heatmap of component activity
• Export functionality for data analysis

Use Cases

Perfect for:

• Performance optimization - Find components that render too often
• Debugging - Understand why components re-render
• Code review - Analyze component usage patterns
• Development - Monitor component behavior during development
• Testing - Verify component rendering in different scenarios

Quick Start

import React from 'react';
import { UsageDashboard, useComponentUsage } from 'react-component-usage-visualizer';

function MyApp() {
  useComponentUsage('MyApp'); // Track this component
  
  return (
    <>
      <UsageDashboard /> {/* Toggle overlay inside your dev app */}
      {/* Your app content */}
    </>
  );
}

Usage Examples

Basic Component Tracking

import { useComponentUsage } from 'react-component-usage-visualizer';

function MyComponent({ title, count }) {
  useComponentUsage('MyComponent'); // Track renders and prop changes
  
  return <div>{title}: {count}</div>;
}

Advanced Hook Tracking

import { 
  useComponentUsage, 
  useEffectTracker, 
  useMemoTracker 
} from 'react-component-usage-visualizer';

function AdvancedComponent({ data, multiplier }) {
  useComponentUsage('AdvancedComponent');
  
  // Track specific hook usage
  useEffectTracker([data, multiplier]);
  useMemoTracker([data]);
  
  const expensiveValue = useMemo(() => {
    return data.reduce((acc, item) => acc + item.value * multiplier, 0);
  }, [data, multiplier]);
  
  return <div>Result: {expensiveValue}</div>;
}

Dashboard Integration

React.js

import { UsageDashboard } from 'react-component-usage-visualizer';

function App() {
  return (
    <div>
      <h1>My React App</h1>
      {/* Your components */}
      
      {/* Add the dashboard - shows floating button in dev mode */}
      <UsageDashboard />
    </div>
  );
}

React Native

import React from 'react';
import { View } from 'react-native';
import { UsageDashboard } from 'react-component-usage-visualizer';

function App() {
  return (
    <View style={{ flex: 1 }}>
      {/* Your React Native components */}
      
      {/* Add the dashboard - shows floating button in dev mode */}
      <UsageDashboard />
    </View>
  );
}

API Reference

Hooks

useComponentUsage(componentName)

Tracks component renders, prop changes, and provides analytics data.

Parameters:

• componentName (string): Name to identify the component in analytics

Returns:

• analytics: Object containing render count, prop changes, and timing data
• trackHookActivity: Function to manually track hook usage
• getUsageData: Function to get current usage data
• getHookActivity: Function to get hook activity data

useEffectTracker(dependencies)

Tracks useEffect hook usage with dependencies.

useMemoTracker(dependencies)

Tracks useMemo hook usage with dependencies.

useStateTracker()

Tracks useState hook usage.

Components

<UsageDashboard />

Renders the overlay analytics panel with:

• Overview tab: Performance metrics and component usage
• Heatmap tab: Visual render intensity heatmap
• Issues tab: Performance warnings and optimization suggestions
• Export functionality: Download data as JSON or CSV (web) / Share data (React Native)

Platform-specific behavior:

• React.js: Shows as floating overlay with file download
• React Native: Shows as modal with native sharing

Utilities

getGlobalUsageData()

Returns all collected usage data across all components.

clearUsageData()

Clears all collected usage data (useful for testing).

exportUsageData(data, format)

Exports usage data in specified format ('json' or 'csv').

Platform Utilities

getPlatform()

Returns the current platform: 'web', 'react-native', or 'unknown'.

isReactNative()

Returns true if running in React Native environment.

isWeb()

Returns true if running in web browser environment.

getExportMethod()

Returns the export method for the current platform: 'download' (web) or 'console' (React Native).

Dashboard Features

Overview Tab

• Total components tracked
• Total renders across all components
• Average renders per component
• Most/least rendered components
• Individual component render counts

Heatmap Tab

• Visual intensity map of component render frequency
• Color-coded bars showing render intensity
• Quick identification of performance hotspots

Issues Tab

• High render count warnings
• Inefficient render patterns
• Unused component detection
• Performance optimization suggestions

Advanced Configuration

Custom Analytics

import { getGlobalUsageData, exportUsageData } from 'react-component-usage-visualizer';

// Get all usage data
const allData = getGlobalUsageData();

// Export as JSON
const jsonData = exportUsageData(allData.components, 'json');

// Export as CSV
const csvData = exportUsageData(allData.components, 'csv');

Performance Monitoring

import { detectPerformanceIssues } from 'react-component-usage-visualizer';

// Check for performance issues
const issues = detectPerformanceIssues(usageData);
console.log('Performance issues:', issues);

Development Mode Only

This package is designed for development use only. The dashboard and tracking features should not be included in production builds. Consider using environment checks:

import { UsageDashboard } from 'react-component-usage-visualizer';

function App() {
  return (
    <div>
      {/* Your app */}
      {process.env.NODE_ENV === 'development' && <UsageDashboard />}
    </div>
  );
}

Contributing

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

License

MIT License - see LICENSE file for details.

Links

• GitHub Repository
• NPM Package
• Issues

Acknowledgments

Inspired by React DevTools and the need for better component performance visualization in development environments.