callstack-best-practices

Diagnose React Native performance issues across FPS, TTI, bundle size, memory, and animations.

28|1|Updated Apr 8, 2026

Search Tags:#performance #optimization #profiling #best-practices #react-native #expo

Ready to run

npx skills add https://github.com/bidah/react-native-hifi --skill callstack-best-practices

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: callstack-best-practices
Source: https://github.com/bidah/react-native-hifi/tree/main/skills/callstack-best-practices
Command: npx skills add https://github.com/bidah/react-native-hifi --skill callstack-best-practices

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Guides agents through structured React Native performance diagnostics so they do not guess solutions without measurable data, guardrails, or category-driven prioritization across FPS, TTI, bundle size, memory, and animation concerns.

Core Features & Use Cases

Impactful guidance: Prioritizes FPS, bundle size, TTI, native performance, memory, and animation improvements in the order Callstack recommends, so agents focus on the biggest wins first.
Reference library: Maps specific problem patterns (e.g., janky lists, memory growth, Hermes startup) to targeted reference files covering JS, native, and bundling topics with impact tags.
Security guardrails: Emphasizes reviewing commands, avoiding unsafe scripts, and validating third-party dependencies before recommending instrumentation or fixes, ensuring responsible optimization.

Quick Start

Ask the agent to apply the callstack-best-practices skill to diagnose a slow React Native screen and recommend prioritized optimizations.

Frequently Asked Questions about callstack-best-practices

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

FAQPage Schema

How do I fix janky animations and low FPS in my React Native app?▼

To fix React Native janky animations and low FPS, diagnose JS thread blocking and bridge overhead. Apply measurement-driven guardrails to categorize native versus JavaScript bottlenecks before implementing optimizations.

What is the best way to reduce React Native bundle size and improve TTI?▼

Reducing React Native bundle size and improving TTI requires structured bundling analyses. Prioritize optimizations by impact, profiling Hermes startup metrics and evaluating native modules to eliminate unnecessary payload overhead.

How do I troubleshoot memory leaks in an Expo workflow?▼

Troubleshoot Expo workflow memory leaks by profiling memory growth patterns against reference guidelines. Identify JavaScript retention issues or native module leaks, enforcing measurement-first validation before recommending fixes.

Does FlashList work better than standard lists for React Native performance?▼

FlashList addresses janky lists by minimizing bridge overhead and JS thread blocking. Evaluating its impact requires measuring FPS during scrolling and comparing native rendering overhead against standard list components.

Why is my Hermes React Native startup slow and how can I profile it?▼

Slow Hermes React Native startup stems from JS thread blocking and bundle parsing overhead. Profile TTI metrics using structured references to identify native module delays and optimize JavaScript bundle execution.

When should I avoid guessing React Native performance fixes?▼

Avoid guessing React Native performance fixes when you lack measurable data for FPS, TTI, or memory leaks. Enforce measurement-first guardrails and validate third-party dependencies before recommending any instrumentation or changes.