Skip to content

Commit 5304ff1

Browse files
committed
docs: update profiling output examples with changed keys
1 parent 9b11bf6 commit 5304ff1

File tree

4 files changed

+22
-10
lines changed

4 files changed

+22
-10
lines changed

README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -97,8 +97,8 @@ agent-react-devtools profile slow
9797

9898
```
9999
Slowest (by avg render time):
100-
@c5 [fn] TodoList avg:4.2ms max:8.1ms renders:6 causes:props-changed
101-
@c4 [fn] SearchBar avg:2.1ms max:3.4ms renders:12 causes:hooks-changed
100+
@c5 [fn] TodoList avg:4.2ms max:8.1ms renders:6 causes:props-changed changed: props: items, onDelete
101+
@c4 [fn] SearchBar avg:2.1ms max:3.4ms renders:12 causes:hooks-changed changed: hooks: #0
102102
@c2 [fn] Header avg:0.8ms max:1.2ms renders:3 causes:parent-rendered
103103
```
104104

packages/agent-react-devtools/skills/react-devtools/SKILL.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -89,12 +89,14 @@ hooks:
8989

9090
```
9191
Slowest (by avg render time):
92-
@c3 [fn] ExpensiveList avg:12.3ms max:18.1ms renders:47 causes:props-changed
93-
@c4 [fn] TodoItem avg:2.1ms max:5.0ms renders:94 causes:parent-rendered, props-changed
92+
@c3 [fn] ExpensiveList avg:12.3ms max:18.1ms renders:47 causes:props-changed changed: props: items, filter
93+
@c4 [fn] TodoItem avg:2.1ms max:5.0ms renders:94 causes:parent-rendered, props-changed changed: props: onToggle
9494
```
9595

9696
Render causes: `props-changed`, `state-changed`, `hooks-changed`, `parent-rendered`, `force-update`, `first-mount`.
9797

98+
When specific changed keys are available, a `changed:` suffix shows exactly which props, state keys, or hooks triggered the render (e.g. `changed: props: onClick, className state: count hooks: #0`).
99+
98100
## Common Patterns
99101

100102
### Wait for the app to connect after a reload

packages/agent-react-devtools/skills/react-devtools/references/commands.md

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -65,21 +65,31 @@ Stop profiling and collect data from React. Shows a summary with duration, commi
6565
### `agent-react-devtools profile slow [--limit N]`
6666
Rank components by average render duration (slowest first). Default limit: 10.
6767

68-
Output columns: label, type tag, component name, avg duration, max duration, render count, all causes.
68+
Output columns: label, type tag, component name, avg duration, max duration, render count, all causes, changed keys.
6969

7070
### `agent-react-devtools profile rerenders [--limit N]`
7171
Rank components by render count (most re-renders first). Default limit: 10.
7272

73-
Output columns: label, type tag, component name, render count, all causes.
73+
Output columns: label, type tag, component name, render count, all causes, changed keys.
7474

7575
### `agent-react-devtools profile report <@cN | id>`
76-
Detailed render report for a single component: render count, avg/max/total duration, all render causes.
76+
Detailed render report for a single component: render count, avg/max/total duration, all render causes, changed keys.
7777

7878
### `agent-react-devtools profile timeline [--limit N]`
7979
Chronological list of React commits during the profiling session. Each entry: index, duration, component count.
8080

8181
### `agent-react-devtools profile commit <N | #N> [--limit N]`
82-
Detail for a specific commit by index. Shows per-component self/total duration and render causes.
82+
Detail for a specific commit by index. Shows per-component self/total duration, render causes, and changed keys.
83+
84+
### Changed Keys
85+
86+
When React DevTools reports which specific props, state keys, or hooks triggered a re-render, profiling commands append a `changed:` suffix:
87+
88+
```
89+
changed: props: onClick, className state: count hooks: #0
90+
```
91+
92+
Categories with no changes are omitted. Keys are deduplicated across commits in aggregate reports (`profile slow`, `profile rerenders`, `profile report`).
8393

8494
## Setup
8595

packages/agent-react-devtools/skills/react-devtools/references/profiling-guide.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ Once you identify a suspect, get its full render report:
5959
agent-react-devtools profile report @c12
6060
```
6161

62-
This shows all render causes. Common patterns:
62+
This shows all render causes and the specific changed keys (e.g. `changed: props: onClick, className state: count`). Common patterns:
6363

6464
| Cause | Meaning | Typical Fix |
6565
|-------|---------|-------------|
@@ -101,7 +101,7 @@ Compare render counts and durations to confirm improvement.
101101
A parent component re-renders (e.g., from a timer or context change) and all children re-render because none use `React.memo`. Look for high re-render counts with `parent-rendered` cause.
102102

103103
### Unstable prop references
104-
Parent passes `onClick={() => ...}` or `style={{...}}` inline — creates new references every render, defeating `memo()`. The child shows `props-changed` as the cause even though the values are semantically identical.
104+
Parent passes `onClick={() => ...}` or `style={{...}}` inline — creates new references every render, defeating `memo()`. The child shows `props-changed` as the cause even though the values are semantically identical. The `changed:` output tells you exactly which props are the culprits (e.g. `changed: props: onClick, style`).
105105

106106
### Expensive computations without memoization
107107
A component does heavy work (filtering, sorting, formatting) on every render. Shows up as high avg render time. Fix with `useMemo`.

0 commit comments

Comments
 (0)