blinkreact v1.0.0

🚀 BlinkReact

✨ Features

• 🔄 Render Count Tracking: Monitor how many times a component re-renders and detect unnecessary re-renders
• ⏱️ Render Time Measurement: Measure the time taken for initial and subsequent renders
• 🧠 State Update Monitoring: Track state changes and detect redundant updates
• 🛠️ Performance Recommendations: Get actionable suggestions for optimizing your component

📦 Installation

# Install globally
npm install -g blinkreact

# Or use npx without installing
npx blinkreact <component-file>

🚦 Usage

blinkreact path/to/your/component.tsx

🔍 How It Works

BlinkReact analyzes your React component through a 4-step process:

1. 🧪 Instrumentation: Adds performance tracking code to your component
2. 📊 Render Analysis: Measures render counts and durations
3. 🔄 State Analysis: Detects redundant state updates and inefficient patterns
4. 📝 Report Generation: Creates a comprehensive performance report

📄 Output

BlinkReact generates a detailed PERFORMANCE_REPORT.md file containing:

🔧 Requirements

• Node.js >= 14.0
• React >= 18.0

📊 Example Report

# BlinkReact Performance Report

## Component: `TodoList`

**File Path:** `src/components/TodoList.tsx`  
**Analysis Date:** 2023-05-15 10:30:45

## Render Performance

- **Total Renders:** 5
- **Average Render Time:** 3.45ms
- **Maximum Render Time:** 8.12ms
- **Unnecessary Renders:** 2

## State Management

- **Total State Updates:** 10
- **Redundant State Updates:** 2

## Performance Recommendations

- **Reduce Unnecessary Renders:** Consider using `React.memo()` to prevent re-renders when props haven't changed.
- **Optimize Render Performance:** The component has slow renders. Consider breaking it down into smaller components.
- **Reduce Redundant State Updates:** The component has redundant state updates. Consider using functional updates.

🤝 Contributing

Contributions, issues and feature requests are welcome! Feel free to check the issues page.

📝 License

This project is ISC licensed.