React Tools
7 tools for React component inspection, profiling, and live editing. Registered after detect finds React in the page.
component_tree
Get the React component tree with props, state, and hooks.
| Parameter | Type | Default | Description |
|---|---|---|---|
depth | number | 8 | Tree depth (1-20) |
componentName | string | — | Filter to a specific component subtree |
Returns: Nested tree structure with each component's props, state values, and hook types.
component_inspect
Deep-inspect a single React component.
| Parameter | Type | Default | Description |
|---|---|---|---|
componentName | string | required | Component to inspect |
Returns:
- Full props (deeply expanded)
- All hooks with current values
- Context consumers
- Rendered DOM elements
- Source file path (if available via source maps)
component_render_reasons
Analyze what's causing a component to re-render.
| Parameter | Type | Default | Description |
|---|---|---|---|
componentName | string | — | Component to analyze (all if omitted) |
Returns: Changed props, state updates, and context changes that triggered re-renders.
component_mutate_props
Live-edit props on a mounted component.
| Parameter | Type | Default | Description |
|---|---|---|---|
componentName | string | required | Target component |
props | object | required | New prop values to apply |
Returns: Before/after props comparison and a screenshot showing the visual effect.
component_rsc_manifest
Read the Next.js App Router RSC (React Server Components) manifest.
Returns: Server/client component boundaries and route segments. Useful for understanding which components render on the server vs client.
component_profile_start
Start the React render profiler.
Records render durations and component render counts in the background.
component_profile_stop
Stop the profiler and get results.
Returns:
- Top slowest components by render duration
- Render counts per component
- Re-render reasons