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.