@react-state-map/core

Core static analysis engine for React State Map.

Parses React codebases and builds component graphs with state flow, context boundaries, prop drilling detection, and anti-pattern analysis — all without executing code.

Installation

npm install @react-state-map/core

Usage

import { ReactParser, serializeGraph, GraphAnalyzer } from '@react-state-map/core';

// Parse a React project
const parser = new ReactParser({
  rootDir: './src',
  drillingThreshold: 3,
  exclude: ['**/node_modules/**', '**/dist/**'],
  include: ['**/*.tsx', '**/*.jsx'],
});

const result = parser.parse();

// Serialize the graph for visualization
const graph = serializeGraph(result.graph);

// Analyze the graph
const analyzer = new GraphAnalyzer(result.graph);
const summary = analyzer.getSummary();

console.log(`Components: ${summary.components.totalComponents}`);
console.log(`State nodes: ${summary.state.totalStateNodes}`);
console.log(`Edges: ${summary.flow.totalEdges}`);

Features

• Static Analysis: Parses React components without executing code
• State Detection: Finds useState, useReducer, useContext, Redux, Zustand, and custom hooks
• Graph Building: Constructs a complete dependency graph of state flow
• Prop Drilling Detection: Identifies props passed through too many layers
• Context Boundaries: Maps React Context provider/consumer relationships
• Pass-Through Analysis: Classifies components as consumer, passthrough, transformer, or mixed
• Bundle Detection: Identifies large object props (5+ properties) being passed through
• Context Leak Detection: Finds components that extract from useContext and re-pass as props
• Rename Tracking: Tracks props through destructuring renames across components

What It Detects

| State Type | Detection | |------------|-----------| | useState | Variable name, initial value | | useReducer | Reducer name, initial state | | useContext | Context name, provider/consumer relationships | | Redux | useSelector, useDispatch | | Zustand | useStore, useXxxStore patterns | | Custom Hooks | Any useXxx hook calls |

Anti-Pattern Detection

| Detection | Description | |-----------|-------------| | Prop Drilling | Props passed through 3+ components without being used | | Pass-Through Components | Components that only forward props without consuming them | | Large Prop Bundles | Object props with 5+ properties being passed through | | Context Leaks | useContext values extracted and re-passed as props | | Prop Renames | Props renamed 2+ times through destructuring |

For Most Users

If you just want to visualize your React state flow, use the CLI:

npx @react-state-map/cli ./src

Or install the VS Code extension for real-time visualization while you code.

License

MIT