recount
Provides tools for analyzing React component render performance, identifying unnecessary re-renders, and explaining why components are slow.
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@recountShow me render hotspots in my app"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
Recount
Your app re-renders too much, and nothing explains why in plain English. Recount does, for both React (web) and React Native, because it's built on the same fiber-level change-tracking data both platforms already share through React DevTools.
Instead of a flame graph or a console.log of raw prop diffs, Recount gives you a sentence:
ProductCardre-rendered 42 times this session (avg 2.1ms, 88.4ms total). ProponSelectchanged on every render. Scheduled byProductList.
Status
Early scaffold. @recount/core (the analysis engine) is implemented and
tested against a realistic fixture. The web and React Native connectors are
stubs — see SPIKE.md for exactly what's verified versus what
still needs a hands-on spike before they're real. Nothing here is faked or
guessed at: where something is uncertain, it's marked as uncertain rather
than papered over.
Related MCP server: react-devtools-mcp
Packages
Package | What it does |
| Platform-agnostic analysis engine. Takes normalized |
|
|
| MCP server exposing |
| Connector stub for browser React apps, built on |
| Connector stub for React Native apps, built on |
Why this is possible for both platforms
React Native's DevTools and the browser extension aren't two separate
tools — both are frontends for the same react-devtools-shared backend
agent embedded in the running app. They differ in transport (RN connects
over a WebSocket via react-devtools-core; web can attach via
react-devtools-inline's message-channel API), but the data shape —
which fiber committed, which props/state/hooks changed, who scheduled the
update — is identical. @recount/core only ever consumes that normalized
shape, so one analysis engine covers both.
Quick start (core + CLI, works today)
npm install
npm run build
node packages/cli/dist/index.js analyze --demoThis runs the bundled fixture (a ProductList / ProductCard scenario)
through the engine and prints the findings — no live app or DevTools
connection required yet.
Roadmap
v1 (this scaffold): decode-and-rank engine, CLI, MCP server, demo fixture. No source-level root-cause analysis yet.
v2: static-analysis heuristics layer — use
SerializedElement.stack/InspectedElement.sourceto point at the file/line responsible, and flag common causes (inline literals, unstable context values, missing memoization). Suppress noise for components already compiled by the React Compiler (compiledWithForget).v3: real
@recount/weband@recount/nativeconnectors once the spikes in SPIKE.md are resolved, so Recount can attach to a running app instead of requiring a pre-exported JSON file.
Contributing
See CODE_OF_CONDUCT.md. Issues and PRs welcome once this is pushed to a public repo.
License
MIT
This server cannot be installed
Maintenance
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
Latest Blog Posts
- Your AI Chatbot Just Exposed Your CEO's Salary to an InternBy Om-Shree-0709 on .Agent IdentityMCP SecurityOAuth Delegation
- Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)By Om-Shree-0709 on .Agentic AiPrompt InjectionWebAssembly
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/dainemawer/recount'
If you have feedback or need assistance with the MCP directory API, please join our Discord server