---

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

``bash
npm install -g react-state-analyzer
`

Or use directly with npx:

`bash
npx react-state-analyzer analyze
`

Quick Start

Analyze your React project:

`bash
state-analyzer analyze ./src
`

Get detailed insights with verbose mode:

`bash
state-analyzer analyze ./src --verbose
`

Export results for further processing:

`bash
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 |
|--------|-------|-------------|
| | - | Directory to analyze (required) |
| --output | -o | Save results as JSON |
| --verbose | -v | Show detailed component information |

Use Cases

$3


Identify components with excessive state that may benefit from refactoring:
`bash
state-analyzer analyze ./src --verbose | grep "11+ states"
`

$3

Understand current patterns before migrating to a new state management solution:
`bash
state-analyzer analyze ./src --output before-migration.json
`

$3

Track state complexity metrics over time:
`bash
state-analyzer analyze ./src --output metrics.json

Parse metrics.json in your CI pipeline

`

JSON Export Format

`json
{
"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

---