React Component Analyzer

Inspect React component state, actions, effects, and their source relationships directly in VS Code.

React Component Analyzer adds an Explorer view for inspecting the state and behavior of the currently active React function component. It works purely on source code—it never loads or executes the analyzed application.

Features

• State & Props — component inputs, useState, useReducer, refs, custom hook/store values, and derived values.
• Actions — setters, dispatchers, hook actions, local actions, and inline JSX event handlers, with direct, transitive, and derived state changes.
• Effects — dependencies, captured values, called actions, state changes, external calls, and cleanup functions for useEffect and useLayoutEffect.
• Source navigation — select any node to reveal its source file and line.
• Multi-component support — follow the active TSX/JSX editor and choose among multiple components in the same file.

Requirements

• VS Code 1.95.0 or newer.
• React projects written in TypeScript (.tsx) or JavaScript (.jsx).

Installation

From a VSIX

1. Build the extension:

   npm run package
   

2. In VS Code, run Extensions: Install from VSIX... and select react-component-analyzer.vsix.

From source

npm install
npm run build

Then press F5 to launch the Extension Development Host.

Usage

1. Open a .tsx / .jsx file that contains a React function component.
2. Open the React Component Analyzer view in the Explorer sidebar.
3. Expand nodes to inspect state, actions, and effects, and their relationships.
4. Click a source leaf to jump to the corresponding file and line.

Use the view title-bar actions to switch between components (Select React Component) and to re-run the analysis (Refresh).

Development

npm install        # install dependencies
npm run check      # typecheck + lint
npm test           # run tests
npm run build      # bundle with esbuild
npm run watch      # rebuild on change
npm run package    # produce react-component-analyzer.vsix

Automated releases

GitHub Actions checks, tests, builds, and packages the extension on pull requests and pushes to main. A tag matching v*.*.* also uploads the VSIX to a GitHub Release and publishes it to the VS Code Marketplace when the VSCE_PAT repository secret is configured.

To configure publishing:

1. Create or verify the DingGao1124 publisher in the Visual Studio Marketplace.

2. Add a repository Actions secret named VSCE_PAT with permission to publish extensions for that publisher.

3. Update CHANGELOG.md, then create and push a version tag:

   npm version patch
   git push origin main --follow-tags
   

The workflow rejects a release tag when its version does not match package.json. Microsoft plans to retire global Azure DevOps personal access tokens on December 1, 2026; migrate Marketplace authentication to Microsoft Entra ID before that date.

Project structure

src/
├─ extension.ts          # extension entry point
├─ analysisWorker.ts     # analysis worker thread
├─ analysis/
│  ├─ analyzer.ts        # TypeScript-based component analyzer
│  ├─ client.ts          # worker client
│  └─ model.ts           # shared data model
└─ view/
   └─ treeProvider.ts    # Explorer tree view

Analysis runs in a worker thread so the UI stays responsive. The analyzer bundles the TypeScript compiler, which is why the built worker is a few megabytes.

Analysis boundaries

The analyzer follows TypeScript symbols and local source for React hooks, custom hooks, Redux-style selectors, reducers, and common useStore selectors. Dynamic calls, reflection, complex HOCs, computed store paths, and implementation details inside node_modules are not guessed. Such relationships remain visible as unresolved boundaries instead of being reported as certain writes.

Contributing

Bug reports and pull requests are welcome. See CONTRIBUTING.md for development setup and guidelines.

License

MIT