perf-benchmarking

Measure React Native app performance via Hermes CPU and render profiling.

1.2k|377|Updated Mar 28, 2019
One-click install
npx skills add https://github.com/GetStream/stream-chat-react-native --skill perf-benchmarking
Or copy as Structured Prompt for Agentâ–¼
Please help me install this Agent Skill.
Skill: perf-benchmarking
Source: https://github.com/GetStream/stream-chat-react-native/tree/main/.claude/skills/perf-benchmarking
Command: npx skills add https://github.com/GetStream/stream-chat-react-native --skill perf-benchmarking

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill unit helps developers measure the performance of React Native applications running stream-chat-react-native, enabling them to identify and address performance bottlenecks.

Core Features & Use Cases

  • On-Device Performance Measurement: Conduct real-device testing for CPU profiling, render profiling, memory analysis, and jank detection.
  • Deterministic Counting: Track and count native calls, listeners, and renders to analyze work performed by the app.
  • Hermes CPU Profiling: Capture and analyze the JavaScript thread time used by the application.
  • Component Render Profiling: Profile and optimize the rendering of individual components.
  • Use Case: For example, a developer may use this Skill unit to measure the impact of a new feature on the application's performance and to identify components that are causing lag or excessive memory usage.

Quick Start

Measure the performance of the React Native app 'ChatApp' using the 'perf-benchmarking' skill on a connected Android device.

Frequently Asked Questions about perf-benchmarking

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

FAQPage Schema
How do I measure React Native performance and identify CPU bottlenecks?â–¼

React Native render profiling involves tracking component renders to identify UI lag and optimization opportunities. This Skill uses analyze-react-profile.js to profile individual component rendering and reduce unnecessary UI updates.

How do I detect memory leaks and jank in a React Native app?â–¼

Yes, you can track native calls and listeners deterministically to analyze the workload performed by your React Native app. This Skill counts native calls and listeners to identify excessive background work and optimize resource usage.

How do I profile React Native components to reduce rendering lag?â–¼

React Native render profiling involves tracking component renders to identify UI lag and optimization opportunities. This Skill uses analyze-react-profile.js to profile individual component rendering and reduce unnecessary UI updates.

Can I measure the performance impact of new features in a Stream Chat React Native app?â–¼

Yes, you can measure the performance impact of new features in a stream-chat-react-native app. This Skill conducts real-device testing for CPU profiling, memory analysis, and jank detection to identify components causing lag or excessive memory usage.

What is the best way to capture a Hermes CPU profile for React Native performance analysis?â–¼

Capturing a Hermes CPU profile involves running on-device performance scripts to record JavaScript thread execution time. This Skill utilizes capture-hermes-profile.js to measure and analyze CPU profiling data for React Native applications.

Do I need a physical Android device to run React Native performance benchmarks?â–¼

Yes, you need a connected Android device to execute the performance benchmarking scripts and capture real-device metrics. This Skill requires running measurement tools directly on-device to accurately profile CPU, memory, and jank.