Marketplace react-native-best-practices
Provides React Native performance optimization guidelines for FPS, TTI, bundle size, memory leaks, re-renders, and animations. Applies to tasks involving Hermes optimization, JS thread blocking, bridge overhead, FlashList, native modules, or debugging jank and frame drops.
install
source · Clone the upstream repo
git clone https://github.com/aiskillstore/marketplace
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/aiskillstore/marketplace "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/callstackincubator/react-native-best-practices" ~/.claude/skills/aiskillstore-marketplace-react-native-best-practices && rm -rf "$T"
manifest:
skills/callstackincubator/react-native-best-practices/SKILL.mdsource content
React Native Best Practices
Overview
Performance optimization guide for React Native applications, covering JavaScript/React, Native (iOS/Android), and bundling optimizations. Based on Callstack's "Ultimate Guide to React Native Optimization".
Skill Format
Each reference file follows a hybrid format for fast lookup and deep understanding:
- Quick Pattern: Incorrect/Correct code snippets for immediate pattern matching
- Quick Command: Shell commands for process/measurement skills
- Quick Config: Configuration snippets for setup-focused skills
- Quick Reference: Summary tables for conceptual skills
- Deep Dive: Full context with When to Use, Prerequisites, Step-by-Step, Common Pitfalls
Impact ratings: CRITICAL (fix immediately), HIGH (significant improvement), MEDIUM (worthwhile optimization)
When to Apply
Reference these guidelines when:
- Debugging slow/janky UI or animations
- Investigating memory leaks (JS or native)
- Optimizing app startup time (TTI)
- Reducing bundle or app size
- Writing native modules (Turbo Modules)
- Profiling React Native performance
- Reviewing React Native code for performance
Priority-Ordered Guidelines
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | FPS & Re-renders | CRITICAL | |
| 2 | Bundle Size | CRITICAL | |
| 3 | TTI Optimization | HIGH | |
| 4 | Native Performance | HIGH | |
| 5 | Memory Management | MEDIUM-HIGH | |
| 6 | Animations | MEDIUM | |
Quick Reference
Critical: FPS & Re-renders
Profile first:
# Open React Native DevTools # Press 'j' in Metro, or shake device → "Open DevTools"
Common fixes:
- Replace ScrollView with FlatList/FlashList for lists
- Use React Compiler for automatic memoization
- Use atomic state (Jotai/Zustand) to reduce re-renders
- Use
for expensive computationsuseDeferredValue
Critical: Bundle Size
Analyze bundle:
npx react-native bundle \ --entry-file index.js \ --bundle-output output.js \ --platform ios \ --sourcemap-output output.js.map \ --dev false --minify true npx source-map-explorer output.js --no-border-checks
Common fixes:
- Avoid barrel imports (import directly from source)
- Remove unnecessary Intl polyfills (Hermes has native support)
- Enable tree shaking (Expo SDK 52+ or Re.Pack)
- Enable R8 for Android native code shrinking
High: TTI Optimization
Measure TTI:
- Use
for markersreact-native-performance - Only measure cold starts (exclude warm/hot/prewarm)
Common fixes:
- Disable JS bundle compression on Android (enables Hermes mmap)
- Use native navigation (react-native-screens)
- Defer non-critical work with
InteractionManager
High: Native Performance
Profile native:
- iOS: Xcode Instruments → Time Profiler
- Android: Android Studio → CPU Profiler
Common fixes:
- Use background threads for heavy native work
- Prefer async over sync Turbo Module methods
- Use C++ for cross-platform performance-critical code
References
Full documentation with code examples in
references/JavaScript/React (js-*
)
js-*| File | Impact | Description |
|---|---|---|
| CRITICAL | Replace ScrollView with virtualized lists |
| MEDIUM | React DevTools profiling |
| HIGH | FPS monitoring and measurement |
| MEDIUM | JS memory leak hunting |
| HIGH | Jotai/Zustand patterns |
| HIGH | useDeferredValue, useTransition |
| HIGH | Automatic memoization |
| MEDIUM | Reanimated worklets |
| HIGH | TextInput optimization |
Native (native-*
)
native-*| File | Impact | Description |
|---|---|---|
| HIGH | Building fast native modules |
| HIGH | Native vs JS libraries |
| HIGH | TTI measurement setup |
| HIGH | Turbo Module threads |
| MEDIUM | Xcode/Android Studio profiling |
| MEDIUM | iOS/Android tooling guide |
| MEDIUM | View hierarchy debugging |
| MEDIUM | C++/Swift/Kotlin memory |
| MEDIUM | Native memory leak hunting |
| CRITICAL | Third-party library alignment for Google Play |
Bundling (bundle-*
)
bundle-*| File | Impact | Description |
|---|---|---|
| CRITICAL | Avoid barrel imports |
| CRITICAL | JS bundle visualization |
| HIGH | Dead code elimination |
| HIGH | App size analysis |
| HIGH | Android code shrinking |
| HIGH | Disable bundle compression |
| HIGH | Asset catalog setup |
| MEDIUM | Evaluate dependencies |
| MEDIUM | Re.Pack code splitting |
Searching References
# Find patterns by keyword grep -l "reanimated" references/ grep -l "flatlist" references/ grep -l "memory" references/ grep -l "profil" references/ grep -l "tti" references/ grep -l "bundle" references/
Problem → Skill Mapping
| Problem | Start With |
|---|---|
| App feels slow/janky | |
| Too many re-renders | |
| Slow startup (TTI) | |
| Large app size | |
| Memory growing | |
| Animation drops frames | |
| List scroll jank | |
| TextInput lag | |
| Native module slow | |
| Native library alignment issue | |
Attribution
Based on "The Ultimate Guide to React Native Optimization" by Callstack.