argent-react-native-optimization
Rules
- Do not apply shotgun optimizations. Measure first, define what "good enough" looks like (target metric + threshold), fix the top offender, re-measure honestly.
- Quick scan —
react-profiler-rendersfor a live render count table. Identifies hot components instantly. - Deep measure — load
argent-react-native-profilerskill.react-profiler-start→ interact →react-profiler-stop→react-profiler-analyze. - Inspect —
react-profiler-component-sourceper finding.react-profiler-fiber-treeto trace component ancestry and render cost. - Verify correctness - before fixing, recollect information from steps above and make a logical conclusion whether the approach is worth undertaking.
- Fix — apply one fix. Validate with
debugger-evaluatebefore committing. - 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.
- Profile for discovery, not only verification. Use the profiler to find issues static analysis missed, not only to confirm fixes.
- 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 simulator interaction, record it as a flow (
argent-create-flowskill) before the first run so all subsequent cycles replay identical steps. - React Compiler: if
react-profiler-analyzereportsreactCompilerEnabled: true, do NOT proposeuseCallback/useMemo/React.memounless you confirmed compiler bail-out viareact-profiler-fiber-tree(absentuseMemoCache). - 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 simulator - all profiling and E2E verification must happen in the main agent.
Pipeline
Lint and semantic sweeps catch deterministic issues cheaply. Profiling finds runtime bottlenecks that static analysis misses. Do both.
Copy this checklist into your TODO list:
More from software-mansion/argent
argent-test-ui-flow
Autonomously test an app UI (iOS or Android) by running interact-screenshot-verify loops using argent MCP tools. Use when testing a UI flow, verifying login works, testing navigation, or running an end-to-end UI test scenario.
6argent-create-flow
Record a reusable flow (scripted sequence of MCP tool calls) that can be replayed later with a single command. Use when the user asks to create, record, or build a flow, or to script a sequence of simulator actions.
6argent-metro-debugger
Debug a React Native app via Metro CDP using argent debugger tools. Use when connecting to Metro, inspecting React components, reading console logs, or evaluating JavaScript in the app runtime.
6argent-react-native-app-workflow
Step-by-step workflows for developing or debugging React Native apps on iOS simulator or Android emulator. Use when starting the app, debugging Metro, fixing builds, diagnosing runtime errors, or running tests.
6argent-react-native-profiler
Profile a React Native Hermes app to measure re-render and CPU performance using argent profiler tools. Use when optimizing for performance, measuring before/after a fix, spotting slow components, diagnosing re-renders, checking CPU hotspots, or producing a ranked issue report.
6argent-device-interact
Interact with an iOS simulator or Android emulator using argent MCP tools. Use when tapping UI elements, performing gestures, scrolling, typing text, pressing hardware buttons, launching apps, opening URLs, taking screenshots.
3