React State Analyzer

Overview

React State Analyzer helps you understand and optimize state management in your React applications. Get instant insights into how your components use state, identify complexity hotspots, and make informed architectural decisions.

Perfect for:

• 🔍 Code reviews and refactoring
• 📊 Architecture analysis and documentation
• 🚀 Migration planning between state management solutions
• 👥 Team onboarding and knowledge sharing

Features

• ⚡ TypeScript AST Parsing - Static analysis of React codebases
• 🎯 Multi-Library Support - Detects useState, useContext, useReducer, Redux, Zustand, and Jotai
• 📈 Statistical Analysis - Distribution charts and component rankings
• 💾 JSON Export - Save analysis data for further processing
• 🎨 Color-Coded Output - Terminal display with syntax highlighting

Installation

npm install -g react-state-analyzer

Or use directly with npx:

npx react-state-analyzer analyze <path>

Quick Start

Analyze your React project:

state-analyzer analyze ./src

Get detailed insights with verbose mode:

state-analyzer analyze ./src --verbose

Export results for further processing:

state-analyzer analyze ./src --output analysis.json

Example Output

Starting state analysis...

=== Analysis Summary ===

Total components: 45
Components with state: 28 (62.2%)
Total state usage: 87
Average: 3.1 states/component

Usage by type:
  useState: 52
  redux: 23
  zustand: 18
  useContext: 12
  jotai: 5

State distribution:
  1-2 states   ████████████ (18)
  3-5 states   ████████ (8)
  6-10 states  ██ (2)
  11+ states    (0)

=== Top 10 Components ===

 1. UserDashboard (8 states) - src/pages/Dashboard.tsx
    useState(5), zustand(2), useContext(1)

Supported State Patterns

| Library | Hooks Detected | |---------|---------------| | React | useState, useContext, useReducer | | Redux | useSelector, useDispatch, useStore | | Zustand | use*Store() patterns | | Jotai | useAtom, useAtomValue, useSetAtom |

CLI Options

| Option | Alias | Description | |--------|-------|-------------| | <path> | - | Directory to analyze (required) | | --output <file> | -o | Save results as JSON | | --verbose | -v | Show detailed component information |

Use Cases

Code Review

Identify components with excessive state that may benefit from refactoring:

state-analyzer analyze ./src --verbose | grep "11+ states"

Migration Planning

Understand current patterns before migrating to a new state management solution:

state-analyzer analyze ./src --output before-migration.json

CI/CD Integration

Track state complexity metrics over time:

state-analyzer analyze ./src --output metrics.json
# Parse metrics.json in your CI pipeline

JSON Export Format

{
  "summary": {
    "totalComponents": 45,
    "totalStateUsages": 87,
    "byType": {
      "useState": 52,
      "zustand": 18,
      "useContext": 12,
      "jotai": 5
    }
  },
  "components": [
    {
      "name": "ComponentName",
      "file": "relative/path/to/file.tsx",
      "stateUsages": [
        {
          "type": "useState",
          "name": "useState",
          "file": "relative/path/to/file.tsx",
          "line": 15,
          "component": "ComponentName"
        }
      ]
    }
  ]
}

Requirements

• Node.js >= 16.0.0

Contributing

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

License

MIT - feel free to use this project for any purpose.

Links

• npm package
• GitHub repository
• Issues