react-scan

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

React Scan

Use targeted captures to optimize measured Studio interactions. Do not infer a performance problem from source alone when the workflow can be reproduced.

使用有针对性的捕获来优化经测量的 Studio 交互。当工作流可以复现时，不要仅凭源代码推断性能问题。

Record a capture

记录一次捕获

Start from the repository root:

bun run react-scan:capture

For the Brand Studio, run:

bun run react-scan:capture:brand

Wait for Studio to finish building, open the printed Studio URL with the browser, and let the page settle. The React Scan WebMCP tools are only registered in this development capture mode.

Call

start_react_scan_recording

, then use browser-use to perform one named interaction three times. Call

stop_react_scan_recording

immediately afterwards. Keep the recording short so startup, HMR, and unrelated interactions do not dominate the data. Call

get_react_scan_recording

to return the raw events and an agent-oriented summary.

After retrieving the recording, stop Studio with Ctrl+C. Recordings only live in the WebMCP result; React Scan does not send them to a separate HTTP collector.

React Scan replaces the React DevTools profiling-hook channel while active. Do not record with the React DevTools Timeline Profiler at the same time.

从仓库根目录开始：

bun run react-scan:capture

对于 Brand Studio，运行：

bun run react-scan:capture:brand

等待 Studio 完成构建，使用浏览器打开终端中打印的 Studio URL，并让页面稳定下来。React Scan WebMCP 工具仅在此开发捕获模式下注册。

调用

start_react_scan_recording

，然后使用 browser-use 将一个指定交互执行三次。随后立即调用

stop_react_scan_recording

。保持录制时间较短，避免启动、HMR 和无关交互主导数据。调用

get_react_scan_recording

以返回原始事件和面向 Agent 的摘要。

获取录制结果后，使用 Ctrl+C 停止 Studio。录制数据仅存在于 WebMCP 结果中；React Scan 不会将其发送到单独的 HTTP 收集器。

React Scan 激活期间会替代 React DevTools 的 profiling-hook 通道。不要同时使用 React DevTools Timeline Profiler 进行录制。

Analyze the evidence

分析证据

Read the

summary

returned by

get_react_scan_recording

first. Confirm the capture contains commit events and inspect

profilingHooksStatuses

; do not interpret a missing profiling channel as an idle application.

Prioritize components with high total self duration, repeated expensive renders, or a clear user-visible slow commit. Inclusive duration contains child work and can double-count a subtree, so use it to locate an expensive boundary, then use self duration and the raw tree to identify the actual work.

Use render causes as evidence, not automatic prescriptions:

High
```
parentRenderCount
```
with no relevant prop, state, context, or hook change suggests a stable memoization boundary.
Repeated changed props suggest checking referential stability at the source location before adding memoization.
Hook, state, or context changes require following the owning update; wrapping the component in
```
memo()
```
will not block them.
Source locations identify JSX call sites. Search for the component definition before editing.

For timeline-position findings, also read

../studio-perf/SKILL.md

before changing subscriptions or memoization boundaries.

首先阅读

get_react_scan_recording

返回的

summary

。确认捕获中包含 commit 事件，并检查

profilingHooksStatuses

；不要将缺失的 profiling 通道误判为应用处于空闲状态。

优先关注总 self duration 较高、反复执行高开销渲染或存在明确用户可见慢 commit 的组件。Inclusive duration 包含子组件的工作，并且可能重复计算子树，因此应先用它定位开销较高的边界，再使用 self duration 和原始组件树确定实际工作来源。

将 render causes 作为证据，而不是自动套用的优化方案：

如果
```
parentRenderCount
```
较高，但相关的 prop、state、context 或 hook 均未发生变化，则提示需要建立稳定的 memoization 边界。
如果变化的 props 反复出现，则应先在源头位置检查引用稳定性，再添加 memoization。
对于 hook、state 或 context 变化，需要追踪其所属更新；用
```
memo()
```
包裹组件无法阻止这些更新。
Source locations 用于标识 JSX 调用位置。编辑前应先搜索组件定义。

对于与时间线位置有关的发现，在修改 subscriptions 或 memoization 边界之前，还应阅读

../studio-perf/SKILL.md

。

Verify an optimization

验证优化

Preserve the baseline capture. After changing code, record the same interaction the same number of times with the same viewport and compare a new capture. Require an improvement in the relevant commit/component metrics without a regression in behavior. Do not optimize every re-render: cheap necessary renders are often preferable to added memoization complexity.

Report the measured before/after change and the checks performed to verify behavior.

保留基线捕获。修改代码后，以相同视口对同一交互执行相同次数的录制，并将新捕获与基线进行比较。要求相关 commit 或组件指标得到改善，且行为没有发生回退。不要优化每一次重新渲染：低成本且必要的渲染通常比引入额外的 memoization 复杂度更可取。

报告变更前后测得的差异，以及为验证行为而执行的检查。