argent-react-native-profiler

Profile React Native Hermes apps to measure re-render behavior and CPU performance.

Updated May 7, 2026
One-click install
npx skills add https://github.com/softwarebyze/Backgammon-Mastermind --skill argent-react-native-profiler
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: argent-react-native-profiler
Source: https://github.com/softwarebyze/Backgammon-Mastermind/tree/main/.agents/skills/argent-react-native-profiler
Command: npx skills add https://github.com/softwarebyze/Backgammon-Mastermind --skill argent-react-native-profiler

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill identifies which React components and commits cause excessive re-renders and high CPU usage in a React Native Hermes app so you can pinpoint performance bottlenecks instead of guessing.

Core Features & Use Cases

  • React commit + CPU profiling: Start Hermes/React commit capture and CPU sampling to measure what changed and how expensive each commit is.
  • Ranked performance reports: Generate an analysis report that enriches CPU hotspots per commit and sorts by total rendering cost.
  • Targeted drill-down: Use CPU/commit/cascade queries to trace hot functions, identify the slowest components, and inspect re-render cascades.
  • (Optional) native correlation: When native profiling is also run, produce a combined report that correlates iOS Instruments hangs with React commits.
  • Reproducible flows: Use flow recording/execution for consistent interaction sequences across before/after profiling runs.

Quick Start

Profile your app’s performance by running react-profiler-start, executing the exact user interaction that reproduces the slowdown, then running react-profiler-analyze and reviewing the ranked hot commits 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 find React re-renders and CPU hotspots in a Hermes app?

To find React re-renders and CPU hotspots in a Hermes app, you profile the application by starting capture, reproducing the interaction causing the slowdown, and analyzing the sorted report to pinpoint expensive commits and functions.

What is the best way to profile a React Native Hermes app for slow component discovery?

The best way to profile a Hermes app for slow component discovery is running a complete profiling workflow: start capture, execute the exact user interaction reproducing the slowdown, then analyze the ranked hot commits report to find bottlenecks.

Can I correlate iOS Instruments hangs with React commits during native profiling?

Yes, you can correlate iOS Instruments hangs with React commits by running optional native profiling alongside React capture, then producing a combined report that maps native performance issues directly to React commit behavior.

How do I trace hot functions and inspect re-render cascades in React Native?

You trace hot functions and inspect re-render cascades in React Native by using CPU and commit queries after profiling, allowing you to drill down into specific commits, identify the slowest components, and diagnose performance bottlenecks accurately.

Does React Native performance profiling work without running native iOS Instruments?

React Native performance profiling works without native iOS Instruments by focusing on Hermes CPU sampling and React commit capture, while native correlation remains an optional step for mapping native hangs to commits.