argent-react-native-profiler

Profiles React Native Hermes apps to measure re-renders and CPU hotspots.

Updated Aug 29, 2026
One-click install
npx skills add https://github.com/Seyamalam/pstu_final --skill argent-react-native-profiler-seyamalam
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: argent-react-native-profiler
Source: https://github.com/Seyamalam/pstu_final/tree/main/.agents/skills/argent-react-native-profiler
Command: npx skills add https://github.com/Seyamalam/pstu_final --skill argent-react-native-profiler-seyamalam

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? React Native apps often suffer from slow renders, excessive re-renders, and CPU hotspots that are hard to locate without structured profiling. This Skill runs a complete profiling workflow on Hermes-based apps, producing ranked reports that pinpoint slow components and functions. ## Core Features & Use Cases - React Commit Profiling: Start and stop CPU sampling with React commit capture, then analyze hot commits sorted by total render time with per-commit CPU breakdowns. - Drill-Down Queries: Investigate specific commits, components, call trees, time windows, and re-render cascades to find root causes before changing code. - Before/After Verification: Re-profile after applying a fix and honestly compare metrics, with session reload support for side-by-side comparison. - Use Case: A developer notices a list screen feels sluggish. They start a profiling session, scroll the list, stop and analyze, then drill into the slowest component's CPU call tree to find the expensive function, fix it, and re-profile to confirm improvement. ## Quick Start Profile my React Native app on the connected device while I scroll the main list, then show me the slowest components and their CPU hotspots.

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 profile React Native app performance with Hermes?

Start a profiling session with react-profiler-start, perform the interaction you want to measure, then call react-profiler-stop and react-profiler-analyze. The report ranks hot commits by total render time with CPU hotspots per commit.

How to find which React Native component re-renders too often?

Use react-profiler-renders for live render counts per component without a full session, or run a profiling session and check normalizedRenderCount in the analyze report. Drill into a component with profiler-cpu-query in component_cpu mode.

Does React Compiler change how I should fix re-render issues?

Yes. If the analyze report shows React Compiler is enabled, do not propose useCallback, useMemo, or React.memo unless you confirm a compiler bail-out by checking for absent useMemoCache in the fiber tree for that component.

Why are my dev mode profiling results slower than production?

Dev mode renders are roughly three times slower than production builds. Prioritize normalizedRenderCount over raw durations, since it scales to production, and treat variations under 10-15 percent as noise rather than signal.

What happens if the debugger disconnects during a profiling session?

A debugger drop also closes the profiling session. Call react-profiler-status to check whether the session is active, taken over, stopped, or missing a React runtime before deciding to stop, restart, or reconnect.

Can I compare profiling results before and after a code fix?

Yes. Re-profile the same scenario after the fix, then use profiler-load to reload the earlier session and compare commit durations, CPU time, and render counts side by side. Recording the interaction as a replayable flow removes variance.