callstackincubator avatar

React Native Best Practices

callstackincubator/agent-skills
1k

This skill provides performance optimization strategies for React Native applications, focusing on improving UI responsiveness, reducing bundle size, and enhancing native performance. It covers key practices such as profiling, configuration, and code patterns across JavaScript, native modules, and bundling processes, tailored to developers aiming to diagnose and fix performance issues. The skill is ideal for React Native developers and engineers seeking to optimize app performance, startup times, and resource management.

npx skills add https://github.com/callstackincubator/agent-skills --skill react-native-best-practices

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 js-* 2 Bundle Size CRITICAL bundle-* 3 TTI Optimization HIGH native-*, bundle-* 4 Native Performance HIGH native-* 5 Memory Management MEDIUM-HIGH js-*, native-* 6 Animations MEDIUM js-*

Quick Reference

Optimization Workflow

Follow this cycle for any performance issue: Measure → Optimize → Re-measure → Validate

  1. Measure: Capture baseline metrics (FPS, TTI, bundle size) before changes
  2. Optimize: Apply the targeted fix from the relevant reference
  3. Re-measure: Run the same measurement to get updated metrics
  4. Validate: Confirm improvement (e.g., FPS 45→60, TTI 3.2s→1.8s, bundle 2.1MB→1.6MB) If metrics did not improve, revert and try the next suggested fix.

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 useDeferredValue for expensive computations

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

Verify improvement after optimization:

# Record baseline size before changes
ls -lh output.js  # e.g., Before: 2.1 MB
# After applying fixes, re-bundle and compare
npx react-native bundle --entry-file index.js --bundle-output output.js \
  --platform ios --dev false --minify true
ls -lh output.js  # e.g., After: 1.6 MB  (24% reduction)

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 react-native-performance for markers
  • 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)
  • Preload commonly-used expensive screens before navigating to them

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-*)

File Impact Description js-lists-flatlist-flashlist.md CRITICAL Replace ScrollView with virtualized lists js-profile-react.md MEDIUM React DevTools profiling js-measure-fps.md HIGH FPS monitoring and measurement js-memory-leaks.md MEDIUM JS memory leak hunting js-atomic-state.md HIGH Jotai/Zustand patterns js-concurrent-react.md HIGH useDeferredValue, useTransition js-react-compiler.md HIGH Automatic memoization js-animations-reanimated.md MEDIUM Reanimated worklets js-uncontrolled-components.md HIGH TextInput optimization

Native (native-*)

File Impact Description native-turbo-modules.md HIGH Building fast native modules native-sdks-over-polyfills.md HIGH Native vs JS libraries native-measure-tti.md HIGH TTI measurement setup native-threading-model.md HIGH Turbo Module threads native-profiling.md MEDIUM Xcode/Android Studio profiling native-platform-setup.md MEDIUM iOS/Android tooling guide native-view-flattening.md MEDIUM View hierarchy debugging native-memory-patterns.md MEDIUM C++/Swift/Kotlin memory native-memory-leaks.md MEDIUM Native memory leak hunting native-android-16kb-alignment.md CRITICAL Third-party library alignment for Google Play

Bundling (bundle-*)

File Impact Description bundle-barrel-exports.md CRITICAL Avoid barrel imports bundle-analyze-js.md CRITICAL JS bundle visualization bundle-tree-shaking.md HIGH Dead code elimination bundle-analyze-app.md HIGH App size analysis bundle-r8-android.md HIGH Android code shrinking bundle-hermes-mmap.md HIGH Disable bundle compression bundle-native-assets.md HIGH Asset catalog setup bundle-library-size.md MEDIUM Evaluate dependencies bundle-code-splitting.md 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 js-measure-fps.md → js-profile-react.md Too many re-renders js-profile-react.md → js-react-compiler.md Slow startup (TTI) native-measure-tti.md → bundle-analyze-js.md Large app size bundle-analyze-app.md → bundle-r8-android.md Memory growing js-memory-leaks.md or native-memory-leaks.md Animation drops frames js-animations-reanimated.md List scroll jank js-lists-flatlist-flashlist.md TextInput lag js-uncontrolled-components.md Native module slow native-turbo-modules.md → native-threading-model.md Native library alignment issue native-android-16kb-alignment.md

Attribution

Based on "The Ultimate Guide to React Native Optimization" by Callstack.

GitHub Owner

Owner: callstackincubator

GitHub Links

Files

``

js-lists-flatlist-flashlist.md

js-profile-react.md

js-measure-fps.md

js-memory-leaks.md

js-atomic-state.md

js-concurrent-react.md

js-react-compiler.md

js-animations-reanimated.md

js-uncontrolled-components.md

native-turbo-modules.md

native-sdks-over-polyfills.md

native-measure-tti.md

native-threading-model.md

native-profiling.md

native-platform-setup.md

native-view-flattening.md

native-memory-patterns.md

native-memory-leaks.md

native-android-16kb-alignment.md

bundle-barrel-exports.md

bundle-analyze-js.md

bundle-tree-shaking.md

bundle-analyze-app.md

bundle-r8-android.md

bundle-hermes-mmap.md

bundle-native-assets.md

bundle-library-size.md

bundle-code-splitting.md

js-measure-fps.md

js-profile-react.md

js-profile-react.md

js-react-compiler.md

native-measure-tti.md

bundle-analyze-js.md

bundle-analyze-app.md

bundle-r8-android.md

js-memory-leaks.md

native-memory-leaks.md

js-animations-reanimated.md

js-lists-flatlist-flashlist.md

js-uncontrolled-components.md

native-turbo-modules.md

native-threading-model.md

native-android-16kb-alignment.md

SKILL.md

name: react-native-best-practices description: 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. license: MIT metadata: author: Callstack tags: react-native, expo, performance, optimization, profiling

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

PriorityCategoryImpactPrefix
1FPS & Re-rendersCRITICALjs-*
2Bundle SizeCRITICALbundle-*
3TTI OptimizationHIGHnative-*, bundle-*
4Native PerformanceHIGHnative-*
5Memory ManagementMEDIUM-HIGHjs-*, native-*
6AnimationsMEDIUMjs-*

Quick Reference

Optimization Workflow

Follow this cycle for any performance issue: Measure → Optimize → Re-measure → Validate

  1. Measure: Capture baseline metrics (FPS, TTI, bundle size) before changes
  2. Optimize: Apply the targeted fix from the relevant reference
  3. Re-measure: Run the same measurement to get updated metrics
  4. Validate: Confirm improvement (e.g., FPS 45→60, TTI 3.2s→1.8s, bundle 2.1MB→1.6MB) If metrics did not improve, revert and try the next suggested fix.

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 useDeferredValue for expensive computations

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

Verify improvement after optimization:

# Record baseline size before changes
ls -lh output.js  # e.g., Before: 2.1 MB
# After applying fixes, re-bundle and compare
npx react-native bundle --entry-file index.js --bundle-output output.js \
  --platform ios --dev false --minify true
ls -lh output.js  # e.g., After: 1.6 MB  (24% reduction)

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 react-native-performance for markers
  • 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)
  • Preload commonly-used expensive screens before navigating to them

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/][references]:

JavaScript/React (js-*)

FileImpactDescription
[js-lists-flatlist-flashlist.md][js-lists-flatlist-flashlist]CRITICALReplace ScrollView with virtualized lists
[js-profile-react.md][js-profile-react]MEDIUMReact DevTools profiling
[js-measure-fps.md][js-measure-fps]HIGHFPS monitoring and measurement
[js-memory-leaks.md][js-memory-leaks]MEDIUMJS memory leak hunting
[js-atomic-state.md][js-atomic-state]HIGHJotai/Zustand patterns
[js-concurrent-react.md][js-concurrent-react]HIGHuseDeferredValue, useTransition
[js-react-compiler.md][js-react-compiler]HIGHAutomatic memoization
[js-animations-reanimated.md][js-animations-reanimated]MEDIUMReanimated worklets
[js-uncontrolled-components.md][js-uncontrolled-components]HIGHTextInput optimization

Native (native-*)

FileImpactDescription
[native-turbo-modules.md][native-turbo-modules]HIGHBuilding fast native modules
[native-sdks-over-polyfills.md][native-sdks-over-polyfills]HIGHNative vs JS libraries
[native-measure-tti.md][native-measure-tti]HIGHTTI measurement setup
[native-threading-model.md][native-threading-model]HIGHTurbo Module threads
[native-profiling.md][native-profiling]MEDIUMXcode/Android Studio profiling
[native-platform-setup.md][native-platform-setup]MEDIUMiOS/Android tooling guide
[native-view-flattening.md][native-view-flattening]MEDIUMView hierarchy debugging
[native-memory-patterns.md][native-memory-patterns]MEDIUMC++/Swift/Kotlin memory
[native-memory-leaks.md][native-memory-leaks]MEDIUMNative memory leak hunting
[native-android-16kb-alignment.md][native-android-16kb-alignment]CRITICALThird-party library alignment for Google Play

Bundling (bundle-*)

FileImpactDescription
[bundle-barrel-exports.md][bundle-barrel-exports]CRITICALAvoid barrel imports
[bundle-analyze-js.md][bundle-analyze-js]CRITICALJS bundle visualization
[bundle-tree-shaking.md][bundle-tree-shaking]HIGHDead code elimination
[bundle-analyze-app.md][bundle-analyze-app]HIGHApp size analysis
[bundle-r8-android.md][bundle-r8-android]HIGHAndroid code shrinking
[bundle-hermes-mmap.md][bundle-hermes-mmap]HIGHDisable bundle compression
[bundle-native-assets.md][bundle-native-assets]HIGHAsset catalog setup
[bundle-library-size.md][bundle-library-size]MEDIUMEvaluate dependencies
[bundle-code-splitting.md][bundle-code-splitting]MEDIUMRe.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

ProblemStart With
App feels slow/janky[js-measure-fps.md][js-measure-fps] → [js-profile-react.md][js-profile-react]
Too many re-renders[js-profile-react.md][js-profile-react] → [js-react-compiler.md][js-react-compiler]
Slow startup (TTI)[native-measure-tti.md][native-measure-tti] → [bundle-analyze-js.md][bundle-analyze-js]
Large app size[bundle-analyze-app.md][bundle-analyze-app] → [bundle-r8-android.md][bundle-r8-android]
Memory growing[js-memory-leaks.md][js-memory-leaks] or [native-memory-leaks.md][native-memory-leaks]
Animation drops frames[js-animations-reanimated.md][js-animations-reanimated]
List scroll jank[js-lists-flatlist-flashlist.md][js-lists-flatlist-flashlist]
TextInput lag[js-uncontrolled-components.md][js-uncontrolled-components]
Native module slow[native-turbo-modules.md][native-turbo-modules] → [native-threading-model.md][native-threading-model]
Native library alignment issue[native-android-16kb-alignment.md][native-android-16kb-alignment]
[references]: references/
[js-lists-flatlist-flashlist]: references/js-lists-flatlist-flashlist.md
[js-profile-react]: references/js-profile-react.md
[js-measure-fps]: references/js-measure-fps.md
[js-memory-leaks]: references/js-memory-leaks.md
[js-atomic-state]: references/js-atomic-state.md
[js-concurrent-react]: references/js-concurrent-react.md
[js-react-compiler]: references/js-react-compiler.md
[js-animations-reanimated]: references/js-animations-reanimated.md
[js-uncontrolled-components]: references/js-uncontrolled-components.md
[native-turbo-modules]: references/native-turbo-modules.md
[native-sdks-over-polyfills]: references/native-sdks-over-polyfills.md
[native-measure-tti]: references/native-measure-tti.md
[native-threading-model]: references/native-threading-model.md
[native-profiling]: references/native-profiling.md
[native-platform-setup]: references/native-platform-setup.md
[native-view-flattening]: references/native-view-flattening.md
[native-memory-patterns]: references/native-memory-patterns.md
[native-memory-leaks]: references/native-memory-leaks.md
[native-android-16kb-alignment]: references/native-android-16kb-alignment.md
[bundle-barrel-exports]: references/bundle-barrel-exports.md
[bundle-analyze-js]: references/bundle-analyze-js.md
[bundle-tree-shaking]: references/bundle-tree-shaking.md
[bundle-analyze-app]: references/bundle-analyze-app.md
[bundle-r8-android]: references/bundle-r8-android.md
[bundle-hermes-mmap]: references/bundle-hermes-mmap.md
[bundle-native-assets]: references/bundle-native-assets.md
[bundle-library-size]: references/bundle-library-size.md
[bundle-code-splitting]: references/bundle-code-splitting.md

Attribution

Based on "The Ultimate Guide to React Native Optimization" by Callstack.

More skills

C
Clerk

clerk

G
Github Issues

github

VL
Vercel React Native Skills

vercel-labs