@swmansion/argent 0.32.1-next.0 → 0.32.1-next.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/installer.mjs +6 -6
- package/dist/mcp-server.mjs +1 -1
- package/dist/tool-args.generated.d.ts +178 -178
- package/dist/tool-server.cjs +1261 -1455
- package/package.json +1 -1
- package/rules/argent.md +19 -183
- package/skills/argent-android-emulator-setup/SKILL.md +5 -13
- package/skills/argent-create-e2e/SKILL.md +1 -1
- package/skills/argent-create-e2e/references/e2e-yaml.md +12 -17
- package/skills/argent-create-e2e/references/live-authoring.md +25 -65
- package/skills/argent-create-e2e/references/reliability-and-recovery.md +8 -8
- package/skills/argent-device-interact/SKILL.md +65 -367
- package/skills/argent-device-interact/references/chromium.md +4 -19
- package/skills/argent-device-interact/references/foldables.md +8 -0
- package/skills/argent-device-interact/references/harmonyos.md +13 -50
- package/skills/argent-ios-device-interact/SKILL.md +0 -1
- package/skills/argent-ios-device-setup/SKILL.md +1 -1
- package/skills/argent-ios-simulator-setup/SKILL.md +3 -9
- package/skills/argent-lens/SKILL.md +20 -75
- package/skills/argent-metro-debugger/SKILL.md +35 -101
- package/skills/argent-native-profiler/SKILL.md +23 -92
- package/skills/argent-qa-e2e/SKILL.md +5 -5
- package/skills/argent-react-native-app-workflow/SKILL.md +34 -203
- package/skills/argent-react-native-optimization/SKILL.md +10 -26
- package/skills/argent-react-native-optimization/references/fix-reference.md +11 -11
- package/skills/argent-react-native-optimization/references/lint-rules.md +4 -5
- package/skills/argent-react-native-optimization/references/semantic-checklist.md +2 -2
- package/skills/argent-react-native-profiler/SKILL.md +46 -110
- package/skills/argent-screen-recording/SKILL.md +18 -37
- package/skills/argent-screenshot-diff/SKILL.md +8 -52
- package/skills/argent-settings-permissions/SKILL.md +15 -117
- package/skills/argent-test-ui-flow/SKILL.md +20 -90
- package/skills/argent-tv-interact/SKILL.md +9 -34
- package/skills/argent-tv-interact/references/vega.md +23 -0
- package/agents/argent-environment-inspector.md +0 -107
- package/agents/references/quality-control-checklist.md +0 -45
- package/skills/argent-device-interact/references/gesture-examples.md +0 -114
- package/skills/argent-device-interact/references/secrets.md +0 -23
- package/skills/argent-metro-debugger/references/failure-scenarios.md +0 -14
- package/skills/argent-metro-debugger/references/source-maps.md +0 -27
- package/skills/argent-react-native-profiler/references/diagnostic-tools.md +0 -101
|
@@ -3,107 +3,38 @@ name: argent-native-profiler
|
|
|
3
3
|
description: Native profiling for CPU hotspots, UI hangs, memory issues. iOS via xctrace; Android via Perfetto. Use when diagnosing native-level performance issues.
|
|
4
4
|
---
|
|
5
5
|
|
|
6
|
-
## 1. Tools
|
|
6
|
+
## 1. Tools and platforms
|
|
7
7
|
|
|
8
|
-
- `native-profiler-start
|
|
9
|
-
- `
|
|
10
|
-
- `
|
|
11
|
-
- `profiler-stack-query`: drill into parsed data: hang stacks, function callers, thread breakdown, leak details.
|
|
12
|
-
- `profiler-load`: list and reload previous trace sessions from disk for re-investigation.
|
|
13
|
-
- Physical iPhone: not supported; use a simulator.
|
|
8
|
+
- `native-profiler-start` → `native-profiler-stop` → `native-profiler-analyze`: record, export, and report.
|
|
9
|
+
- `profiler-stack-query`: drill into the analyzed data (hang stacks, function callers, thread breakdown, leaks).
|
|
10
|
+
- `profiler-load`: reload an earlier session from disk.
|
|
14
11
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
## 2. Platform Support
|
|
18
|
-
|
|
19
|
-
- **iOS**: Backend: Xcode Instruments via `xctrace` on a booted simulator or connected device. Requires Xcode command-line tools on PATH. Surfaces CPU hotspots, UI hangs, and memory leaks (instruments `Leaks` table).
|
|
20
|
-
- **Android**: Backend: Perfetto via `adb shell perfetto` + an in-process WASM trace-processor engine. Surfaces CPU hotspots and UI hangs, with per-hang jank reason codes, a main-thread state breakdown with `blocked_function` attribution, and a GC overlap annotation. Also reports an RSS-growth signal for memory pressure; treat it as a hint to confirm manually, not a confirmed leak. The target app must be debuggable or include `<profileable android:shell="true"/>` in its manifest for `perf_sample` callstacks to be captured.
|
|
21
|
-
|
|
22
|
-
---
|
|
12
|
+
**iOS** (Instruments via `xctrace`): simulator only; a physical iPhone is not supported. Needs full Xcode (`xcrun xctrace version`). Reports CPU hotspots, UI hangs and memory leaks.
|
|
23
13
|
|
|
24
|
-
|
|
14
|
+
**Android** (Perfetto): emulator or physical device. Reports CPU hotspots and UI hangs (with jank reasons and the main thread's blocking function), plus an RSS-growth signal for memory pressure: treat it as a hint to confirm, not a confirmed leak. The app must be debuggable or declare `<profileable android:shell="true"/>` in its manifest, or no `perf_sample` callstacks are captured.
|
|
25
15
|
|
|
26
|
-
|
|
16
|
+
`argent-react-native-profiler` starts native profiling alongside React profiling by default; this skill's workflow and investigation patterns apply in both cases.
|
|
27
17
|
|
|
28
|
-
|
|
29
|
-
- **CPU hotspot** → `profiler-stack-query` mode=`thread_breakdown` for per-thread distribution → mode=`function_callers` for the dominant function.
|
|
30
|
-
- **Memory leak** → `profiler-stack-query` mode=`leak_stacks` filtered by `object_type` for responsible frames and libraries.
|
|
31
|
-
- iOS: if leaks come back unattributed (responsible frame `<Call stack limit reached>`), re-run `native-profiler-start` with `malloc_stack_logging: true`. This cold-launches the app with Malloc Stack Logging so leaks carry a real allocation backtrace (responsible frame + library). It restarts the app and adds overhead, so use it only when you need leak attribution, not for CPU/hang passes.
|
|
32
|
-
|
|
33
|
-
After presenting findings, ask the user whether to investigate further, implement fixes, or stop. After applying fixes, always re-profile the same scenario and compare with `profiler-load`. Report honestly whether the target metric improved, regressed, or stayed flat. If the fix showed no net benefit or introduced regressions elsewhere, say so and reconsider.
|
|
34
|
-
|
|
35
|
-
**Tip:** For reproducible before/after comparisons, record the interaction sequence as an e2e test using the `argent-create-e2e` skill before the first profiling run. Replay with `e2e-execute` on subsequent runs to eliminate interaction variance.
|
|
36
|
-
|
|
37
|
-
> **Note:** The `argent-react-native-profiler` instructs to start native profiling automatically alongside React profiling. This skill's workflow and investigation patterns apply in both cases.
|
|
38
|
-
|
|
39
|
-
---
|
|
40
|
-
|
|
41
|
-
## 4. Workflow
|
|
18
|
+
## 2. Workflow
|
|
42
19
|
|
|
43
20
|
**Complete all steps in order; do not break mid-flow.**
|
|
44
21
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
2. If the app is not running, use `launch-app` with the correct bundle ID first.
|
|
52
|
-
3. Only pass `app_process` explicitly if the tool reports multiple running user apps and you need to disambiguate.
|
|
53
|
-
|
|
54
|
-
> **Note**: If multiple build flavors are installed (dev, staging, prod), the tool will detect whichever one is currently running. If both are running, it will ask you to specify.
|
|
55
|
-
|
|
56
|
-
### Step 1: Start recording
|
|
57
|
-
|
|
58
|
-
Call `native-profiler-start` with `device_id` (iOS UDID or Android serial). The tool auto-detects the running app and saves the trace to `/tmp/argent-profiler-cwd/` with a timestamped filename.
|
|
59
|
-
Let the user interact with the app or drive interaction via simulator tools (see `argent-device-interact` skill).
|
|
60
|
-
While a profiler records, interaction tools return no automatic screenshot or element tree, so the capture does not load the app. Call `screenshot` or `describe` when you need to see the screen; interaction tools still wait for the screen to settle before they return, so add no wait of your own; on an Android emulator each screenshot during a profile takes one frame in about 100 ms and does not wake the screen capture; on a physical Android device it takes about 150–200 ms and briefly wakes the device screen capture, so take them sparingly there.
|
|
61
|
-
|
|
62
|
-
### Step 2: Stop and export
|
|
22
|
+
1. **Start.** Make sure the app is running (`launch-app` if not); `native-profiler-start` detects it. Pass `app_process` only if it reports several running user apps (e.g. dev and prod flavors) or picks the wrong one. Then let the user interact, or drive the app yourself (`argent-device-interact` skill). While a profiler records, interaction tools return no automatic screenshot or element tree, so the capture does not load the app. Call `screenshot` or `describe` when you need to see the screen; interaction tools still wait for the screen to settle before they return, so add no wait of your own; on an Android emulator each screenshot during a profile takes one frame in about 100 ms and does not wake the screen capture; on a physical Android device it takes about 150–200 ms and briefly wakes the device screen capture, so take them sparingly there.
|
|
23
|
+
2. **Stop.** `native-profiler-stop`. On iOS, check `exportDiagnostics` for export warnings.
|
|
24
|
+
3. **Analyze.** `native-profiler-analyze`. Findings are 🔴 RED (act on it) or 🟡 YELLOW (worth investigating, may be acceptable).
|
|
25
|
+
4. **Present and ask.** Summarize the key findings, then ask the user whether to investigate further, implement fixes, or stop. Do not move on silently.
|
|
26
|
+
5. **Drill down** with `profiler-stack-query` (patterns below).
|
|
27
|
+
6. **Fix and re-profile** the same scenario; compare with the earlier session via `profiler-load` (`list`, then `load_native` with its `session_id` and the `device_id`). Report honestly whether the target metric improved, regressed, or stayed flat; if there is no net benefit or something else regressed, say so and reconsider. For reproducible before/after runs, record the interaction as an e2e test (`argent-create-e2e` skill) before the first run and replay it with `e2e-execute`.
|
|
63
28
|
|
|
64
|
-
|
|
29
|
+
### Investigation patterns
|
|
65
30
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
Call `native-profiler-
|
|
69
|
-
|
|
70
|
-
### Step 4: Present findings and ask about next steps
|
|
71
|
-
|
|
72
|
-
Present a concise summary of the key findings. Then follow the "After analysis" guideline: ask whether to investigate further with query tools, implement fixes, or stop.
|
|
73
|
-
|
|
74
|
-
### Step 5: Drill-down investigation
|
|
75
|
-
|
|
76
|
-
Use `profiler-stack-query` to investigate specific findings. See §3 Investigation Patterns for chaining guidance.
|
|
77
|
-
|
|
78
|
-
### Step 6: Reload previous sessions
|
|
79
|
-
|
|
80
|
-
To revisit a previous trace:
|
|
81
|
-
|
|
82
|
-
1. Call `profiler-load` mode=`list` to see available sessions.
|
|
83
|
-
2. Call `profiler-load` mode=`load_native` session_id=`<timestamp>` device_id=`<UDID>` to re-parse the XML files.
|
|
84
|
-
3. Use `profiler-stack-query` to investigate the reloaded data.
|
|
85
|
-
|
|
86
|
-
---
|
|
87
|
-
|
|
88
|
-
## 5. Understanding Results
|
|
89
|
-
|
|
90
|
-
Bottlenecks are categorized by severity:
|
|
91
|
-
|
|
92
|
-
- **RED**: CPU functions taking >15% of total time, all UI hangs, and **attributed** memory leaks (those with a resolved responsible frame). These require immediate attention.
|
|
93
|
-
- **YELLOW**: CPU functions taking 3-15% of total time, and **unattributed** memory leaks (`<Call stack limit reached>`, no library; see the memory-leaks caveat below). Worth investigating but may be acceptable.
|
|
94
|
-
|
|
95
|
-
Each bottleneck type indicates a different class of problem:
|
|
96
|
-
|
|
97
|
-
- **CPU hotspots**: Native functions consuming excessive CPU time. Look for tight loops, expensive computations, or redundant work.
|
|
98
|
-
- **UI hangs**: Main thread blocked long enough to cause visible jank or unresponsiveness. Often caused by synchronous I/O, heavy layout passes, or lock contention.
|
|
99
|
-
- **Memory leaks**: Objects allocated but never freed. Common causes include retain cycles, unclosed resources, or forgotten observers. Argent records via `xctrace --attach`, which has no malloc-stack history, so on the simulator most leaks come back **unattributed** (`<Call stack limit reached>`, no library) and are dominated by benign system allocations; these are reported as a low-confidence YELLOW summary, not confirmed RED leaks. For attributed stacks, capture with malloc stack logging enabled at launch.
|
|
100
|
-
|
|
101
|
-
---
|
|
31
|
+
- **Hang** → mode `hang_stacks` for the native call chain → `function_callers` for the suspected function → read the native source.
|
|
32
|
+
- **CPU hotspot** → `thread_breakdown` for the per-thread split → `function_callers` for the dominant function.
|
|
33
|
+
- **Memory leak** (iOS) → `leak_stacks`, filtered by `object_type`, for the responsible frames and libraries. To attribute leaks shown as `<Call stack limit reached>`, re-run `native-profiler-start` with `malloc_stack_logging: true`; it restarts the app and adds overhead, so not for CPU or hang passes.
|
|
102
34
|
|
|
103
|
-
##
|
|
35
|
+
## 3. Caveats
|
|
104
36
|
|
|
105
|
-
- **Simulator
|
|
106
|
-
- **
|
|
107
|
-
- **
|
|
108
|
-
- **
|
|
109
|
-
- **Live data variability**: If the app fetches live API data, different responses between runs change rendering workload independently of code changes. Note when data-dependent screens show variance.
|
|
37
|
+
- **Simulator and emulator timings reflect the host machine**, not device hardware. Compare runs against each other rather than trusting absolute numbers; a physical Android device gives real-hardware numbers.
|
|
38
|
+
- **Profiler overhead:** if `JSLexer`, `JSONEmitter` or Hermes internals dominate the JS thread, that is instrumentation cost, not app work. Discount those entries.
|
|
39
|
+
- **Run-to-run variance:** treat only consistent, directional changes (across 2+ runs, or a >15% delta) as signal.
|
|
40
|
+
- **Live data:** if the app fetches live API data, different responses change the workload independently of code changes. Note when data-dependent screens vary.
|
|
@@ -9,9 +9,9 @@ Load `argent-create-e2e` as the authoring engine. Follow its required references
|
|
|
9
9
|
|
|
10
10
|
**Vega** supports every item below: `launch: { vega: ... }`, `await:`/`assert:` selectors, `snapshot:`, and `idle` all run there. Only the touch directives are missing, because Vega is remote-driven. Navigate with recorded `tool: tv-remote` steps and type with `tool: keyboard`, which leaves item 5 with nothing to govern. A D-pad path is relative to where focus already is, so gate every move with item 4's identity check rather than assuming the cursor landed. Read `argent-tv-interact` for focus reading and remote navigation.
|
|
11
11
|
|
|
12
|
-
**Apple TV and Android TV are out of scope.** The runner does not reject touch directives there
|
|
12
|
+
**Apple TV and Android TV are out of scope.** The runner does not reject touch directives there: on Apple TV they fail at the gesture layer, and on Android TV a `tap:` can pass without doing anything. Use `argent-tv-interact` and report the limitation.
|
|
13
13
|
|
|
14
|
-
**Physical iPhones** run QA e2e tests
|
|
14
|
+
**Physical iPhones** run QA e2e tests under the hardware limits listed in `argent-create-e2e`. Expect a selector authored on a simulator to miss on the phone's `describe`-based runner tree.
|
|
15
15
|
|
|
16
16
|
## Definition of done
|
|
17
17
|
|
|
@@ -98,7 +98,7 @@ Complete the create-e2e polish and blocking audit. Then:
|
|
|
98
98
|
| ------------------ | ----------- | ------------------------- | --------- |
|
|
99
99
|
| Tap `settings-tab` | Settings | `settings-screen` visible | `idle` |
|
|
100
100
|
|
|
101
|
-
|
|
101
|
+
Repair a missing gate as the create-e2e blocking audit says: record identity live on the restored screen, and add `idle` in YAML as one of the three permitted polish insertions. Re-record any missing action or other structural check.
|
|
102
102
|
|
|
103
103
|
## 5. Prove two consecutive passes
|
|
104
104
|
|
|
@@ -106,9 +106,9 @@ After the last edit and audit, set the streak to zero:
|
|
|
106
106
|
|
|
107
107
|
1. Choose one runner for both passes. Use `e2e-execute` locally or `argent e2e run <name> --platform <platform>` for CI. Switching runners resets the streak.
|
|
108
108
|
2. Seed, review, and freeze snapshot baselines. Baseline updates do not count as passes.
|
|
109
|
-
3. Before mobile pass 1, recycle Argent services for this test's device: two warm passes are correlated evidence, because a fixed timing margin can pass twice simply because environment speed did not change. Scope `stop-all-simulator-servers` to `devices: [<device>]`. Never omit the scope:
|
|
109
|
+
3. Before mobile pass 1, recycle Argent services for this test's device: two warm passes are correlated evidence, because a fixed timing margin can pass twice simply because environment speed did not change. Scope `stop-all-simulator-servers` to `devices: [<device>]`. Never omit the scope: step 7 restarts this proof often, and every bare call sweeps the devices of all other agents. Use the MCP call for `e2e-execute`, or `argent run stop-all-simulator-servers --devices <device>` from the CLI's install. The reset must not change app or account data. For Chromium, let the runner boot the declared app and omit `device`. Vega owns no recyclable Argent services, so the teardown is a no-op there and both passes are warm.
|
|
110
110
|
4. Run from the test's launch and setup without baseline-update mode. Count a pass only when `ok: true` and every acceptance check executed. A false `when:` can skip optional setup only. An errored step does not advance the streak, and the count mixes two kinds: read each reason. One that could not run (an unreadable tree under `idle`, an unresolvable `run:` target) is environment: fix it and rerun. **A failed `launch:` also scores `errored`, and it is a verdict about the app**; an app that no longer installs or starts is the regression this test exists to catch, so report it instead of rerunning.
|
|
111
|
-
5. Resolve every passing-step warning before completion. Also resolve recorded-wait warnings from `e2e-finish-recording`. Follow [Live waits and checks](../argent-create-e2e/references/live-authoring.md#live-waits-and-checks). For runner warnings, `await: { idle: true }` raises [six different warnings](../argent-create-e2e/references/e2e-yaml.md#idle-readiness), so read which one it is first.
|
|
111
|
+
5. Resolve every passing-step warning before completion. Also resolve recorded-wait warnings from `e2e-finish-recording`. Follow [Live waits and checks](../argent-create-e2e/references/live-authoring.md#live-waits-and-checks). For runner warnings, `await: { idle: true }` raises [six different warnings](../argent-create-e2e/references/e2e-yaml.md#idle-readiness), each with its own repair, so read which one it is first. Inspect the screen, disclose the cause, and verify that surrounding acceptance checks use stable elements rather than stillness. A [selector-less gesture](../argent-create-e2e/references/e2e-yaml.md#directives) warning means the gesture was dispatched blind during a tree-source outage: restore the tree source, usually by relaunching the app, and rerun. Accepting that warning needs an app that serves no tree, which cannot satisfy this contract anyway.
|
|
112
112
|
6. Run the same YAML again immediately with the same runner. Do not manually reset app or account data.
|
|
113
113
|
7. Reset the streak after any failure, edit, re-recording, baseline update, or state-changing manual recovery. Repair through `argent-create-e2e`, audit again, and restart with fresh services.
|
|
114
114
|
|
|
@@ -7,245 +7,76 @@ Physical iPhone (`kind: "device"`): Metro debugging and profiling tools reject i
|
|
|
7
7
|
|
|
8
8
|
## 1. Starting the React Native App
|
|
9
9
|
|
|
10
|
-
### 1.1
|
|
10
|
+
### 1.1 Read the project's configuration first
|
|
11
11
|
|
|
12
|
-
**Before running commands**, read the project's build and run
|
|
13
|
-
|
|
14
|
-
Do NOT default to `npx react-native start` or `npx react-native run-ios` without first checking for custom scripts and workflows.
|
|
15
|
-
|
|
16
|
-
**Manual fallback** (if neither the agent nor the tool is available): read ALL `package.json` scripts: look for custom scripts like `start:local`, `start:dev`, `ios`, `build:ios`, flavors, etc. Custom scripts take priority over default commands. Also check `metro.config.js` for non-default port or watchFolders. For iOS builds, prefer opening `.xcworkspace` over `.xcodeproj` (CocoaPods generates the workspace).
|
|
12
|
+
**Before running commands**, read the project's build and run setup: every `package.json` script (custom scripts such as `start:local`, `start:dev`, `ios`, `build:ios` or flavors take priority over the defaults) and `metro.config.js` (a non-default port or `watchFolders`). Do NOT default to `npx react-native …` or `npx expo …` without checking. Before the first build, install dependencies if `node_modules` or `ios/Pods` is missing.
|
|
17
13
|
|
|
18
14
|
**If the project structure is convoluted, ask the user before proceeding.**
|
|
19
15
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
**Checklist before start:**
|
|
23
|
-
|
|
24
|
-
- [ ] `node_modules` present (if not: `npm install` or `yarn`)
|
|
25
|
-
- [ ] For iOS: `ios/Podfile` exists; if `ios/Pods` missing or stale, run `cd ios && pod install && cd ..`
|
|
26
|
-
- [ ] No conflicting Metro on default port (see 1.2)
|
|
16
|
+
Once you know how the project starts Metro, builds and runs the app, and what environment setup it needs, **save that to project memory** so you don't need to rediscover it each time.
|
|
27
17
|
|
|
28
18
|
### 1.2 Start Metro
|
|
29
19
|
|
|
30
|
-
1.
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
```bash
|
|
35
|
-
npx react-native start
|
|
36
|
-
```
|
|
37
|
-
|
|
38
|
-
Optional: `npx react-native start --reset-cache` if cache issues are suspected.
|
|
39
|
-
|
|
40
|
-
1. **Verify Metro is ready**: use the `debugger-status` tool. It returns a `status` result instead of erroring: `status: "connected"` or `status: "not_connected"` with `reason: "no_app_connected"` both mean Metro is up (the app just hasn't attached yet); `reason: "metro_not_running"` means Metro is not reachable; follow the result's `guidance`.
|
|
41
|
-
|
|
42
|
-
1. **Projects with flavors or custom configs**: Use project-specific start script if present (e.g. `npm run start:local`), and start Metro **before** running the app.
|
|
20
|
+
1. If Metro is already running on the project's port, do not start another (§2).
|
|
21
|
+
2. Start it in the background with the project's start script (e.g. `npm run start:local`, `yarn start:dev`). With none: `npx expo start` in an Expo project, `npx react-native start` otherwise.
|
|
22
|
+
3. Verify with `debugger-status`: `status: "connected"` or `reason: "no_app_connected"` both mean Metro is up (the app just hasn't attached yet); `reason: "metro_not_running"` means Metro is not reachable.
|
|
43
23
|
|
|
44
24
|
### 1.3 Run the App
|
|
45
25
|
|
|
46
|
-
|
|
26
|
+
Start the app only once Metro is ready, from the project root. Use the project's build/run script if one exists (e.g. `npm run ios`, `npm run android`, `yarn ios:debug`); fall back to the defaults below only if there is none.
|
|
47
27
|
|
|
48
|
-
**
|
|
49
|
-
|
|
50
|
-
**Pass the target device explicitly**: derive it from `list-devices` (see `<device_selection_rule>`):
|
|
28
|
+
**Pass the target device explicitly**, taken from `list-devices`: use the platform the user named, and do not pick a cabled physical phone just because it is listed. If the device isn't booted yet, boot it with `boot-device` (see `argent-ios-simulator-setup` / `argent-android-emulator-setup`).
|
|
51
29
|
|
|
52
30
|
```bash
|
|
53
|
-
npx
|
|
54
|
-
npx
|
|
31
|
+
npx expo run:ios --device <UDID> # Expo
|
|
32
|
+
npx expo run:android --device <avdName from list-devices>
|
|
33
|
+
npx react-native run-ios --udid <UDID> # bare RN (needs @react-native-community/cli)
|
|
34
|
+
npx react-native run-android --deviceId=<adb-serial>
|
|
55
35
|
```
|
|
56
36
|
|
|
57
|
-
**Android only**: after install, run `adb -s <serial> reverse tcp:8081 tcp:8081` so the emulator/device can reach Metro on your host. Repeat if the device restarts or adb drops. If `list-devices` returns a `hint` about the adb server, prefix this and every other `adb` command that you run yourself, as the hint shows.
|
|
58
|
-
|
|
59
|
-
**Agent checklist:**
|
|
60
|
-
|
|
61
|
-
- [ ] Metro is already running and shows "ready"
|
|
62
|
-
- [ ] Command run from project root
|
|
63
|
-
- [ ] If the device isn't booted yet: use `boot-device` with the iOS `udid` or Android `avdName`. Refer to the `argent-ios-simulator-setup` / `argent-android-emulator-setup` skill.
|
|
64
|
-
- [ ] Android: `adb -s <serial> reverse tcp:8081 tcp:8081` done.
|
|
65
|
-
|
|
66
37
|
---
|
|
67
38
|
|
|
68
|
-
## 2.
|
|
69
|
-
|
|
70
|
-
### 2.1 Check for Existing Metro
|
|
71
|
-
|
|
72
|
-
Before starting Metro, avoid "port already in use" errors. Default port to check is :8081, infer the port from documentation:
|
|
73
|
-
|
|
74
|
-
```bash
|
|
75
|
-
lsof -i :PORT
|
|
76
|
-
```
|
|
77
|
-
|
|
78
|
-
- **No output** → Port free; safe to start Metro.
|
|
79
|
-
- **Output with PID** → Another process is using the port.
|
|
80
|
-
|
|
81
|
-
Use the `debugger-status` tool to check whether the process on that port is actually a Metro server: it returns a structured result, not an error. `status: "connected"` or `reason: "no_app_connected"` → the process is Metro. `reason: "metro_not_running"` while `lsof` shows a listener → the port is occupied by something that is **not** Metro; the result's `detail` field shows what the process answered (`Metro at port ... is not running (got: ...)`). In that case ask the user whether you may kill the process.
|
|
82
|
-
|
|
83
|
-
To kill a Metro process, use the `stop-metro` tool (requires user confirmation).
|
|
84
|
-
|
|
85
|
-
### 2.2 Confirm Correct Server Connection
|
|
86
|
-
|
|
87
|
-
- **App must point at the same host/port as the running Metro.** Default: same machine, port 8081.
|
|
88
|
-
- **iOS Simulator:** By default uses localhost; no extra config needed for same-machine Metro.
|
|
89
|
-
|
|
90
|
-
**Verify Metro is reachable:** use the `debugger-status` tool. `reason: "metro_not_running"` means Metro did not answer on that port: start it (§2.1); `"no_app_connected"` means Metro answered but the app has not attached (§2.3). Any other reason: follow the result's `guidance` (it does not by itself prove Metro is up).
|
|
91
|
-
|
|
92
|
-
### 2.3 Reload the App (Ensure New Bundle)
|
|
93
|
-
|
|
94
|
-
After code or config changes, the app must load the new bundle:
|
|
95
|
-
|
|
96
|
-
| Method | How |
|
|
97
|
-
| ----------- | ------------------------------------------------------------------------------------------------- |
|
|
98
|
-
| Reload tool | Use the `debugger-reload-metro` tool |
|
|
99
|
-
| Restart app | Use the `restart-app` tool, or kill the app in simulator and run `npx react-native run-ios` again |
|
|
39
|
+
## 2. Metro Already on the Port?
|
|
100
40
|
|
|
101
|
-
**
|
|
41
|
+
The default port is 8081 unless the project configures another. Check it with `lsof -i :<port>`. If something is listening, `debugger-status` tells you whether it is Metro: `status: "connected"` or `reason: "no_app_connected"` means it is. `reason: "metro_not_running"` while `lsof` shows a listener means the port is held by something that is **not** Metro; the result's `detail` shows what answered (`... (got: ...)`). In that case ask the user whether you may kill the process.
|
|
102
42
|
|
|
103
|
-
|
|
104
|
-
- [ ] App was started after Metro was ready
|
|
105
|
-
- [ ] When needing to reload: refer to 2.3
|
|
43
|
+
To stop a Metro process, use the `stop-metro` tool.
|
|
106
44
|
|
|
107
45
|
---
|
|
108
46
|
|
|
109
|
-
## 3. Build
|
|
47
|
+
## 3. Build, Reload, Reinstall
|
|
110
48
|
|
|
111
|
-
|
|
49
|
+
| Situation | Action |
|
|
50
|
+
| --------------------------------------------- | ---------------------------------------------------------------- |
|
|
51
|
+
| JS/React only changed | `debugger-reload-metro`, or `restart-app`. No rebuild. |
|
|
52
|
+
| Native code, pods or project config changed | Rebuild with the project's run command (Metro can stay running). |
|
|
53
|
+
| App needs reinstalling from a `.app` / `.apk` | `reinstall-app`. |
|
|
112
54
|
|
|
113
|
-
|
|
55
|
+
When a build fails (e.g. xcodebuild exit code 65), try the simplest fix first: clean the build folder and retry, then clear caches and reinstall dependencies and pods.
|
|
114
56
|
|
|
115
|
-
|
|
116
|
-
2. Clear caches and reinstall dependencies: reset Metro cache, `watchman watch-del-all`, remove `node_modules` + lockfile, `npm install`, then `cd ios && rm -rf build Pods Podfile.lock && pod install --repo-update`
|
|
117
|
-
3. CocoaPods issues: `pod deintegrate` then `pod install --repo-update`
|
|
118
|
-
4. Open `ios/*.xcworkspace` in Xcode for detailed errors in the Report navigator
|
|
119
|
-
|
|
120
|
-
### 3.2 When to Ask the User
|
|
121
|
-
|
|
122
|
-
**After 2-3 failed build or run attempts, STOP and ask the user for guidance.** The user may know about required env vars, Xcode version requirements, custom build configurations, monorepo-specific setup, or required external services.
|
|
123
|
-
|
|
124
|
-
If the project structure is convoluted and the correct build approach is not obvious, **ask the user early** rather than guessing.
|
|
125
|
-
|
|
126
|
-
### 3.3 Saving Build Workflow for Later
|
|
127
|
-
|
|
128
|
-
Once you discover the correct build/run workflow for a project, **save it to project memory**. Capture: commands to start Metro, commands to build/run the app, and any required environment setup.
|
|
129
|
-
|
|
130
|
-
### 3.4 When to Reinstall vs Refresh
|
|
131
|
-
|
|
132
|
-
| Situation | Action |
|
|
133
|
-
| ----------------------------------------------------- | ------------------------------------------------------------------------------------- |
|
|
134
|
-
| JS/React only changed | Use `debugger-reload-metro` tool. No rebuild. |
|
|
135
|
-
| Native code or `pod install` / project config changed | Rebuild: `npx react-native run-ios` (Metro can stay running). |
|
|
136
|
-
| `node_modules` or `package.json` changed | `npm install`, then if native deps changed run `cd ios && pod install`. Then rebuild. |
|
|
137
|
-
| App needs reinstalling from .app path | Use `reinstall-app` tool with UDID, bundle ID, and .app path. |
|
|
138
|
-
| Persistent native build errors | Full clean + reinstall (step 2 above). |
|
|
139
|
-
|
|
140
|
-
### 3.5 Device Control
|
|
141
|
-
|
|
142
|
-
| Action | Tool / Command |
|
|
143
|
-
| -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
144
|
-
| List devices | `list-devices` tool (iOS + Android) |
|
|
145
|
-
| Boot an iOS simulator | `boot-device` tool with `udid` |
|
|
146
|
-
| Boot an Android emulator | `boot-device` tool with `avdName` |
|
|
147
|
-
| Launch an app | `launch-app` tool (pass device id + bundle id / package name) |
|
|
148
|
-
| Restart an app | `restart-app` tool (pass device id + bundle id / package name) |
|
|
149
|
-
| Open a URL / deep link | `open-url` tool (pass device id + URL) |
|
|
150
|
-
| Rotate device | `rotate` tool |
|
|
151
|
-
| Stop simulator server | `stop-simulator-server` tool (iOS UDID or Android serial, one device) |
|
|
152
|
-
| Stop all simulator servers | `stop-all-simulator-servers` tool: pass `devices: [...]` to scope the teardown to this session's devices (an unscoped call also tears down other agents' devices; use it only for a machine-wide cleanup) |
|
|
153
|
-
|
|
154
|
-
For full simulator setup workflow, refer to the `argent-ios-simulator-setup` skill.
|
|
57
|
+
**After 2-3 failed build or run attempts, STOP and ask the user for guidance.** The user may know about required env vars, Xcode version requirements, custom build configurations, monorepo-specific setup, or required external services. If the correct build approach is not obvious, **ask the user early** rather than guessing.
|
|
155
58
|
|
|
156
59
|
---
|
|
157
60
|
|
|
158
61
|
## 4. Runtime Problems in the App
|
|
159
62
|
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
|
163
|
-
|
|
|
164
|
-
| **
|
|
165
|
-
| **
|
|
166
|
-
| **Visual state of the app** | Use `screenshot` tool to capture the current screen, but prefer `describe` or `debugger-component-tree` for actual navigation and target discovery. If a permission prompt or system-owned modal overlay is not exposed reliably, then fall back to `screenshot`. |
|
|
167
|
-
| **Evaluate JS in the app** | Use `debugger-evaluate` tool to run JavaScript in the app's runtime. |
|
|
168
|
-
| **Native crashes / native stack** | `npx react-native log-ios` or iOS Simulator: Debug → Open System Log. |
|
|
169
|
-
| **Build/runtime config** | `metro.config.js`, `babel.config.js`, `package.json` scripts, `ios/Podfile`. |
|
|
170
|
-
|
|
171
|
-
For comprehensive Metro debugging workflows (component inspection, console logs, JS evaluation), refer to the `argent-metro-debugger` skill.
|
|
172
|
-
|
|
173
|
-
### 4.2 JS Console Logs (Log Registry)
|
|
174
|
-
|
|
175
|
-
Logs are written to a flat log file on disk under `~/.argent/tmp/`. Use the **log-registry → grep** pattern instead of reading logs inline.
|
|
63
|
+
| Problem type | Where to look |
|
|
64
|
+
| --------------------------------- | ---------------------------------------------------------------------------------------------------------------- |
|
|
65
|
+
| **JavaScript errors / logs** | `debugger-log-registry` for a summary and the log file path, then `Grep` the file |
|
|
66
|
+
| **React component hierarchy** | `debugger-component-tree`, or `debugger-inspect-element` at logical pixel coordinates (not normalized 0-1) |
|
|
67
|
+
| **App state** | `debugger-evaluate` to run JavaScript in the app's runtime |
|
|
68
|
+
| **Native crashes / native stack** | iOS: `~/Library/Logs/DiagnosticReports/`. Android: `adb -s <serial> logcat -d`, with `-b crash` for crashes only |
|
|
176
69
|
|
|
177
|
-
|
|
70
|
+
If `list-devices` returns a `hint` about the adb server, prefix the `adb` command above as the hint shows.
|
|
178
71
|
|
|
179
|
-
|
|
72
|
+
For connection failures, component inspection and searching the console log file, use the `argent-metro-debugger` skill.
|
|
180
73
|
|
|
181
|
-
|
|
74
|
+
Do not open the React Native DevMenu by default; use the argent tools instead.
|
|
182
75
|
|
|
183
76
|
---
|
|
184
77
|
|
|
185
78
|
## 5. Testing the App
|
|
186
79
|
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
- **Unit tests**: Look for Jest in `package.json` (`"test": "jest"`, `jest` config). Run: `npm test` or `yarn test`.
|
|
190
|
-
- **E2E**: Look for Detox (`.detoxrc.js` or similar), or other E2E config. Dependencies: `detox`, `detox-cli`, and for iOS often `applesimutils`.
|
|
191
|
-
- **Visible UI changes**: Use `argent-test-ui-flow` for manual QA. For `screenshot-diff` rules and parameters, follow the `argent-screenshot-diff` skill. Use it when stable before/after screenshots add meaningful pixel-visible evidence.
|
|
192
|
-
- **UI flow testing**: For interactive UI testing with automatic screenshot verification, refer to the `argent-test-ui-flow` skill.
|
|
193
|
-
|
|
194
|
-
### 5.2 Running Tests (Typical)
|
|
195
|
-
|
|
196
|
-
If the user's intent is ambiguous (run existing tests, write new tests, or find missing coverage), clarify before proceeding.
|
|
197
|
-
|
|
198
|
-
- **Jest**: `npm test` or `npx jest`.
|
|
199
|
-
- **Detox (example)**:
|
|
200
|
-
- Build: `detox build --configuration ios.sim.release` (or debug).
|
|
201
|
-
- Run: `detox test --configuration ios.sim.release`.
|
|
202
|
-
- Ensure simulator is booted and not used by another process.
|
|
203
|
-
|
|
204
|
-
### 5.3 Agent Testing Checklist
|
|
205
|
-
|
|
206
|
-
- [ ] Read `package.json` and test config (Jest, Detox, etc.).
|
|
207
|
-
- [ ] If E2E: confirm simulator/device and build config.
|
|
208
|
-
- [ ] If unclear: clarify whether to use existing workflows or write new tests.
|
|
209
|
-
|
|
210
|
-
---
|
|
211
|
-
|
|
212
|
-
## Quick Reference: Tools & Commands
|
|
213
|
-
|
|
214
|
-
| Goal | Tool / Command |
|
|
215
|
-
| ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
|
|
216
|
-
| Check port 8081 | `lsof -i :8081` |
|
|
217
|
-
| Kill Metro | `stop-metro` tool |
|
|
218
|
-
| Start Metro | `npx react-native start` |
|
|
219
|
-
| Start Metro (reset cache) | `npx react-native start --reset-cache` |
|
|
220
|
-
| Run iOS app | `npx react-native run-ios` |
|
|
221
|
-
| Run Android app | `npx react-native run-android` |
|
|
222
|
-
| List devices | `list-devices` tool (iOS + Android) |
|
|
223
|
-
| Boot a device | `boot-device` tool (pass `udid` for iOS or `avdName` for Android) |
|
|
224
|
-
| Take screenshot | `screenshot` tool |
|
|
225
|
-
| Compare visible UI changes | `screenshot-diff` tool; follow the `argent-screenshot-diff` skill for baseline/current capture choices |
|
|
226
|
-
| Describe screen (a11y tree) | `describe` tool for normal app screens and in-app modals; use `screenshot` only when permission/system overlays are not exposed reliably |
|
|
227
|
-
| Read JS console logs | `debugger-log-registry` tool |
|
|
228
|
-
| Reload JS bundle | `debugger-reload-metro` tool |
|
|
229
|
-
| Check Metro status | `debugger-status` tool |
|
|
230
|
-
| Inspect React component tree | `debugger-component-tree` tool |
|
|
231
|
-
| Run JS in app | `debugger-evaluate` tool |
|
|
232
|
-
| iOS native logs | `npx react-native log-ios` |
|
|
233
|
-
| Android native logs | `npx react-native log-android` or `adb -s <serial> logcat` |
|
|
234
|
-
| Clean + reinstall (nuclear) | See §3.1 step 3 |
|
|
235
|
-
|
|
236
|
-
If `list-devices` returns a `hint` about the adb server, prefix the `adb` commands above as the hint shows.
|
|
237
|
-
|
|
238
|
-
---
|
|
239
|
-
|
|
240
|
-
## Related Skills
|
|
241
|
-
|
|
242
|
-
| Skill | When to use |
|
|
243
|
-
| ------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
244
|
-
| `argent-ios-simulator-setup` | Initial iOS simulator boot and connection setup |
|
|
245
|
-
| `argent-android-emulator-setup` | Initial Android emulator boot and connection setup |
|
|
246
|
-
| `argent-device-interact` | Tapping, swiping, typing, hardware buttons, gestures on the simulator/emulator |
|
|
247
|
-
| `argent-metro-debugger` | JS-runtime CDP debugging (Metro on iOS / Android; the four ported tools also drive Chromium/CDP apps): component inspection, console logs, JS evaluation |
|
|
248
|
-
| `argent-react-native-profiler` | Profiling performance, finding re-render issues, CPU hotspots |
|
|
249
|
-
| `argent-test-ui-flow` | Interactive UI testing with automatic screenshot verification after each action |
|
|
80
|
+
Ask the user before running tests: which suite (unit, E2E, or both), whether to use existing CI commands, and whether they want you to run existing tests, write new ones, or explore test cases yourself. Find the test commands in `package.json` and the test config (Jest, Detox, …).
|
|
250
81
|
|
|
251
|
-
|
|
82
|
+
For interactive UI testing with screenshot verification after each action, use the `argent-test-ui-flow` skill. For visible UI changes, follow the `argent-screenshot-diff` skill when stable before/after screenshots add meaningful pixel-visible evidence.
|
|
@@ -6,15 +6,10 @@ description: Optimizes a React Native app by profiling first to find real bottle
|
|
|
6
6
|
## Rules
|
|
7
7
|
|
|
8
8
|
- Do not apply shotgun optimizations. Measure first, define what "good enough" looks like (target metric + threshold), fix the top offender, re-measure honestly.
|
|
9
|
-
- **Quick scan**: `react-profiler-renders` for a live render count table. Identifies hot components instantly.
|
|
10
|
-
- **Deep measure**: load `argent-react-native-profiler` skill. `react-profiler-start` → interact → `react-profiler-stop` → `react-profiler-analyze`.
|
|
11
|
-
- **Inspect**: `react-profiler-component-source` per finding. `react-profiler-fiber-tree` to trace component ancestry and render cost.
|
|
12
|
-
- **Verify correctness** - before fixing, recollect information from steps above and make a logical conclusion whether the approach is worth undertaking.
|
|
13
|
-
- **Fix**: apply one fix. Validate with `debugger-evaluate` before committing.
|
|
14
|
-
- **Re-measure**: report whether the target metric improved, regressed, or stayed flat. Check for regressions in other areas. If no net benefit or unacceptable tradeoffs, revert.
|
|
15
9
|
- **Profile for discovery, not only verification.** Use the profiler to find issues static analysis missed, not only to confirm fixes.
|
|
16
|
-
- **
|
|
17
|
-
- **
|
|
10
|
+
- **Verify before fixing:** recollect the evidence and conclude whether the fix is worth undertaking. Validate a fix with `debugger-evaluate` before committing it.
|
|
11
|
+
- **One fix per cycle for architectural changes.** Mechanical batch fixes (inline styles, index keys) can be grouped; re-profile once after the batch. When the measurement involves device interaction, record it as an e2e test (`argent-create-e2e` skill) before the first run so every cycle replays identical steps.
|
|
12
|
+
- **React Compiler**: if the project uses it (`babel-plugin-react-compiler` in the Babel config, or `experiments.reactCompiler: true` in the Expo config), skip memoization fixes (`React.memo`, `useMemo`, `useCallback`, hoisting inline objects and functions) in every phase; the compiler does them. Keep them for components the compiler skips (`compilationMode: "annotation"`, `"use no memo"`, a `sources` filter). Where the profiler report marks a component ⚠️ (bailout suspected), fix what stops the compiler.
|
|
18
13
|
- **Sub-agents**: Phases 1–2 dispatch sub-agents: one per file for lint results, one per checklist item for semantic. Sub-agents CANNOT touch the device - all profiling and E2E verification must happen in the main agent.
|
|
19
14
|
|
|
20
15
|
## Pipeline
|
|
@@ -29,11 +24,12 @@ Optimization Progress:
|
|
|
29
24
|
- [ ] Phase 2: Semantic sweep (judgment: memoization, lists, animations, etc.)
|
|
30
25
|
- [ ] Phase 3: Baseline profile (find real bottlenecks, fix top offenders)
|
|
31
26
|
- [ ] Phase 4: Verify no regressions (crashes, errors, red screens)
|
|
27
|
+
- [ ] Re-run lint to confirm the fixes added no new issues and none were missed
|
|
32
28
|
```
|
|
33
29
|
|
|
34
30
|
### Phase 1: Lint sweep
|
|
35
31
|
|
|
36
|
-
Run ESLint once at the project root with a comprehensive RN performance ruleset. Dispatch sub-agents to fix results: one per file.
|
|
32
|
+
Run ESLint once at the project root with a comprehensive RN performance ruleset. Dispatch sub-agents to fix results: one per file, in parallel.
|
|
37
33
|
See [references/lint-rules.md](references/lint-rules.md) for ruleset and procedure.
|
|
38
34
|
|
|
39
35
|
### Phase 2: Semantic sweep
|
|
@@ -41,24 +37,12 @@ See [references/lint-rules.md](references/lint-rules.md) for ruleset and procedu
|
|
|
41
37
|
Review each area requiring judgment: memoization, list rendering, animations, async patterns, effect cleanup, state hygiene, context architecture. Dispatch one sub-agent per checklist item.
|
|
42
38
|
See [references/semantic-checklist.md](references/semantic-checklist.md) for full checklist.
|
|
43
39
|
|
|
44
|
-
### Phase 3:
|
|
40
|
+
### Phase 3: Profiling
|
|
45
41
|
|
|
46
|
-
1.
|
|
47
|
-
2.
|
|
48
|
-
3.
|
|
49
|
-
4. Cross-reference profiling results with Phase 1–2 findings
|
|
50
|
-
5. Fix highest-impact issues. Re-profile after architectural changes; batch mechanical fixes. If a recorded e2e test breaks after a fix (e.g., UI layout changed), follow `argent-create-e2e` skill to repair the e2e test rather than silently discarding it.
|
|
42
|
+
1. For a quick look without a session, `react-profiler-renders` lists how many instances of each component are mounted (not how often they re-render).
|
|
43
|
+
2. Load the `argent-react-native-profiler` skill and follow its workflow (React and native profiling together) on the key user flows: the screens the user named, or all major flows. It covers analysis, drill-down, and re-profiling after each fix.
|
|
44
|
+
3. Cross-reference the profiling results with the Phase 1–2 findings, and fix the highest-impact issues top-down. Re-profile after architectural changes; batch mechanical fixes.
|
|
51
45
|
|
|
52
46
|
### Phase 4: Verify no regressions
|
|
53
47
|
|
|
54
|
-
Navigate every screen and UI flow within scope
|
|
55
|
-
|
|
56
|
-
## App-wide optimization
|
|
57
|
-
|
|
58
|
-
1. **Phase 1**: run lint centrally (one command), dispatch sub-agents to fix per-file in parallel
|
|
59
|
-
2. **Phase 2**: one sub-agent per checklist item for semantic sweep
|
|
60
|
-
3. **Phase 3**: main agent profiles top offending screens; fixes architectural issues top-down
|
|
61
|
-
4. **Phase 4**: main agent navigates all screens to verify nothing crashes
|
|
62
|
-
|
|
63
|
-
After the entire run, run lint again to verify no new issues were introduced with your changes.
|
|
64
|
-
This also helps ensure you haven't missed any issues which could've been fixed.
|
|
48
|
+
Navigate every screen and UI flow within scope (the entire app if no scope was given, via `argent-device-interact`) and confirm each renders without errors. Check `debugger-log-registry` for warnings and errors (`Grep` its log file). Argent hides LogBox toasts once a `debugger-*` tool connects, so screenshots catch only full-screen red errors. Look for regressions the fixes introduced (e.g. fewer re-renders but higher CPU, or new jank on a different screen). Main agent only.
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
# Fix Reference
|
|
2
2
|
|
|
3
|
-
Match profiler findings and semantic sweep results to concrete fixes.
|
|
3
|
+
Match profiler findings and semantic sweep results to concrete fixes. With React Compiler active, skip the first three rows for the components it compiles; keep them for components it skips (`compilationMode: "annotation"`, `"use no memo"`, a `sources` filter).
|
|
4
4
|
|
|
5
|
-
| Finding | Fix | Detail
|
|
6
|
-
| -------------------------------------------- | ----------------------------------------------------------------------------- |
|
|
7
|
-
| Re-renders with same props | `React.memo(Comp)` |
|
|
8
|
-
| Expensive recomputation / unstable callbacks | `useMemo(fn, [deps])` / `useCallback(fn, [deps])` | `useCallback` must pair with `React.memo` on child; alone it has no effect
|
|
9
|
-
| Inline objects/arrays in JSX | `StyleSheet.create()` / module-level const | New reference every render breaks shallow equality
|
|
10
|
-
| List jank | `removeClippedSubviews`, `maxToRenderPerBatch`, `windowSize`, `getItemLayout` | Or migrate to `@shopify/flash-list`
|
|
11
|
-
| JS-thread animation jank | `useNativeDriver: true` or `react-native-reanimated` | `useNativeDriver`
|
|
12
|
-
| Heavy work during transitions | `
|
|
13
|
-
| Slow startup |
|
|
14
|
-
| Redundant, heavy, or n+1 network calls | `view-network-logs` → `view-network-request-details` | Batch, debounce, or cache at the data layer
|
|
5
|
+
| Finding | Fix | Detail |
|
|
6
|
+
| -------------------------------------------- | ----------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
|
|
7
|
+
| Re-renders with same props | `React.memo(Comp)` | Only where the props really are equal between renders |
|
|
8
|
+
| Expensive recomputation / unstable callbacks | `useMemo(fn, [deps])` / `useCallback(fn, [deps])` | `useCallback` must pair with `React.memo` on child; alone it has no effect |
|
|
9
|
+
| Inline objects/arrays in JSX | `StyleSheet.create()` / module-level const | New reference every render breaks shallow equality |
|
|
10
|
+
| List jank | `removeClippedSubviews`, `maxToRenderPerBatch`, `windowSize`, `getItemLayout` | Or migrate to `@shopify/flash-list` (v2 needs the New Architecture) |
|
|
11
|
+
| JS-thread animation jank | `useNativeDriver: true` or `react-native-reanimated` | `useNativeDriver` can't animate layout props (width, height, margins, …) |
|
|
12
|
+
| Heavy work during transitions | `requestIdleCallback()` | Runs the work when the JS thread is idle; `InteractionManager` is deprecated |
|
|
13
|
+
| Slow startup | Defer heavy imports (lazy `require()`) | Check inline requires in the Metro config (on in bare RN, off in Expo) |
|
|
14
|
+
| Redundant, heavy, or n+1 network calls | `view-network-logs` → `view-network-request-details` | Batch, debounce, or cache at the data layer |
|