argent-react-native-profiler

Profile React Native Hermes commits and CPU time to rank re-renders.

1.9k|65|Updated Feb 23, 2026
One-click install
npx skills add https://github.com/software-mansion/argent --skill argent-react-native-profiler-software-mansion
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: argent-react-native-profiler
Source: https://github.com/software-mansion/argent/tree/main/packages/skills/skills/argent-react-native-profiler
Command: npx skills add https://github.com/software-mansion/argent --skill argent-react-native-profiler-software-mansion

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It solves the problem of slow React Native performance by capturing React render commits and CPU sampling data so you can identify what re-renders and which work is actually expensive.

Core Features & Use Cases

  • React Profiler (Hermes / React commits): Start/stop CPU sampling and React commit capture, then analyze commits with CPU-enriched hot spots sorted by total render time.
  • Actionable drill-down tools: Use component and commit queries plus call-tree and stack queries (and cross-correlated reporting when native profiling runs in parallel) to pinpoint root causes.
  • Optimization workflow support: Encourage a before/after cycle with re-profiling and targeted investigation, including optional flow-based interaction recording for reproducibility.
  • Use case: Measure the impact of a performance fix by profiling before and after changes, then ranking the commits/components most responsible for re-render cost.

Quick Start

Ask the assistant to profile your React Native Hermes app for performance by running the React profiling start tool, completing your key user interaction, stopping the profilers, and generating an analysis report.

Frequently Asked Questions about argent-react-native-profiler

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I identify React Native re-renders and CPU hotspots?

To identify React Native re-renders and CPU hotspots, profile Hermes CPU sampling and React render commits, then analyze the session to rank commits by total render time. This captures exactly which work is expensive and quantifies component re-render costs.

What's the best way to measure performance optimization impact in React Native?

The best way to measure React Native performance optimization impact is running a before/after profiling cycle. Capture Hermes commits and CPU data prior to changes, then re-profile after to generate ranked reports comparing component and commit costs.

How do I profile Hermes CPU time and React commits on a device?

To profile Hermes CPU time and React commits on a device, start the React profiling tool targeting a specific device_id and port. Complete your key user interaction, stop the profilers, and generate a CPU-enriched analysis report.

Can I drill down into component and function-level performance bottlenecks?

Yes, you can drill down into component and function-level performance bottlenecks using component, commit, call-tree, and stack query tools. These queries pinpoint root causes by cross-correlating CPU sampling data with React commit timelines.

Does React Native profiling support reproducible interaction recording?

Yes, React Native profiling supports reproducible interaction recording through optional flow-based interaction recording. This ensures consistent measurement across before/after optimization cycles by standardizing the user interaction being profiled.