Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>React component profilerNew to Visual Studio Code? Get it now.
React component profiler

React component profiler

Sourcepride

|
134 installs
| (1) | Free
A simple extension that profiles your react component usage and dependencies
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

React Component Profiler

Get an insight of how many components are in your (React/NextJs) project and where they are being used.

Features

  • number of components in component folders
  • number of components present in every file
  • number of times a component is used by other components
  • link to possible files component is called from
  • list of all hooks used in a component file
  • component search (coming soon...)
  • refresh
  • show only component files toggle
  • show only components toggle

full image profiler tab

Configuration

By default the extension assumes all project socurce code lives inside the src directory which is usally not the case especially with nextjs.

to point the extension to app as your sourcecode folder add this settings to settings.json

{
     "react-component-profiler": {
         "srcFolder": "app"
     },
}

Contribute

Please feel free to contribute to this project or raise an issue/ pull request. see our contributions.md

Release Notes

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft