Verified:GitHub

react-native-best-practices

Diagnose React Native performance issues with profiling-first optimization workflows.

Updated Aug 23, 2026

Search Tags:#performance #profiling #fps #react-native #bundle-size #memory-leaks #hermes

One-click install

npx skills add https://github.com/tommy771004/StockAnalyzeAIConnectV2 --skill react-native-best-practices-tommy771004

Or copy as Structured Prompt for Agent▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill solves performance degradation in React Native apps—such as dropped frames, slow startup (TTI), oversized bundles, memory leaks, and excessive re-renders—by guiding profiling-first optimizations across JS, native, and bundling layers.

Core Features & Use Cases

FPS, re-render, and JS thread triage: Identify what’s slow (or re-rendering too much) and apply targeted fixes for jank, long JS work, and animation-related stutters.
Bundle size and startup optimization: Reduce JS bundle and app download/install size using bundle analysis, tree shaking, barrel import removal, and Hermes-specific tuning.
Memory and native performance diagnostics: Find JS and native memory leaks with DevTools/Instruments and improve native bottlenecks using profiling guidance.

Use case example: Your app’s scrolling stutters on a long list; use the list virtualization guidance plus FPS/profiler skills to confirm the bottleneck, then refactor to FlatList/FlashList with the right props and verify improvements by re-measuring FPS and re-render counts.

Quick Start

Ask the AI to help you optimize a React Native screen that feels janky and slow by first measuring FPS, then identifying the heaviest re-render or commit in React DevTools, and finally applying the most relevant fix from the React Native Best Practices references.

Frequently Asked Questions about react-native-best-practices

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

FAQPage Schema

How do I fix React Native scrolling jank and dropped frames on long lists?▼

Identify React Native re-renders using React DevTools Profiler to locate heavy commits, then apply targeted fixes like memoization or state lifting, and verify optimization by re-measuring commit times and render counts.

What's the best way to reduce React Native bundle size and improve startup time?▼

Reduce React Native bundle size and startup time by analyzing the bundle, applying tree shaking, removing barrel imports, and tuning Hermes-specific settings to achieve faster TTI across iOS and Android.

How do I find memory leaks in a React Native app?▼

Diagnose React Native JS thread blocking and native bridge bottlenecks using a profiling-first workflow to measure FPS and identify long-running tasks, then apply targeted optimizations and validate frame drops are resolved.

Does Hermes affect React Native bundle behavior and performance optimization?▼

React Native performance optimization workflows prioritize bottlenecks by measuring FPS and profiling JS thread blocking, bridge issues, and animation stutters, then applying targeted fixes and validating with command-level verification steps.