react-devtools
callstackincubator/agent-device
Inspect and profile React Native component trees, props, state, hooks, and render performance.
What is react-devtools?
React Native debugging skill that lets you inspect component hierarchies, analyze props and state, identify render causes, and profile performance issues. Use this when investigating why components rerender, finding slow components, or analyzing hooks behavior in React Native apps.
- Inspect React Native component trees and hierarchy
- View component props, state, and hooks in real-time
- Identify render causes and ownership chains
- Profile component performance and detect slow renders
- Find excessive rerenders and optimization opportunities
- Analyze hook dependencies and state changes
How to install react-devtools
npx skills add https://github.com/callstackincubator/agent-device --skill react-devtools- agent-device CLI version 0.14.0 or later
- React Native application running on agent-device
How to use react-devtools
- 1.Run `agent-device --version` to verify CLI is 0.14.0 or later
- 2.If needed, upgrade with `npm install -g agent-device@latest`
- 3.Run `agent-device help react-devtools` to see available commands
- 4.Use `agent-device react-devtools` commands to inspect component trees, props, state, and hooks
- 5.Use `--depth` flag to bound tree reads and keep queries focused
- 6.Profile only the specific interaction you're investigating to avoid noise
Use cases
- Debug why a specific component is rerendering unexpectedly
- Identify performance bottlenecks in a React Native app
- Inspect props and state values during development
- Profile render performance across the component tree
- Investigate hook dependency issues causing extra renders
- React Native developers
- Performance engineers optimizing React Native apps
- QA engineers debugging component behavior
- Full-stack developers working with React Native
react-devtools FAQ
react-devtools focuses on React internals: component trees, props, state, hooks, and render analysis. Use regular agent-device commands for visible UI, refs, screenshots, logs, network, or device-level performance.
Run `agent-device help react-devtools` to see current command shapes, workflow guidance, and exact syntax for your CLI version.
Use `--depth` to limit how deep the component tree inspection goes, keeping queries bounded and focused on the relevant subtree.
Yes, but profile only the specific interaction you're investigating to avoid performance overhead and noise in the results.
Upgrade with `npm install -g agent-device@latest` and recheck the version. If you cannot upgrade, this skill is not available.
Full instructions (SKILL.md)
Source of truth, from callstackincubator/agent-device.
name: react-devtools description: Inspect and profile React Native component trees from agent-device. Use for React Native performance, profiling, props, state, hooks, render causes, slow components, excessive rerenders, or questions like why a component rerendered.
react-devtools
Router for React Native internals. Private setup before using this skill:
agent-device --version
Require agent-device >= 0.14.0; older CLIs lack these help topics. If older, run npm install -g agent-device@latest, recheck, then continue. If you cannot upgrade, stop and tell the user. Do not include version/upgrade commands in final plans.
Read current CLI guidance:
agent-device help react-devtools
Use agent-device react-devtools ... for component tree, props, state, hooks, render ownership, performance profiling, slow components, or rerenders. Use normal agent-device commands for visible UI, refs, screenshots, logs, network, or device-level perf.
Keep reads bounded with --depth/find, treat @c refs as reload-local, and profile only the investigated interaction. Let help react-devtools provide exact command shapes, remote bridge ordering, pinned package details, and current workflow guidance.
Related skills
More from callstackincubator/agent-device and the wider catalog.
agent-device
Automate iOS, tvOS, macOS, and Android device interactions—tap, type, scroll, screenshot, and extract UI data.
dogfood
Systematically explore and test mobile apps on iOS/Android to find bugs and UX issues.