mcpField
R
react-native-performance

react-native-performance

github.com/maikotrindadeDevelopment1350 installsUpdated today
Repository

About react-native-performance

A React Native performance reference skill for developers profiling and optimizing apps. It organizes guidance across rendering, startup, bundles, native performance, memory, and profiling tools.

Key features

  1. 01FPS and re-render guidance
  2. 02Bundle-size reduction techniques
  3. 03TTI measurement methods
  4. 04Native performance and threading
  5. 05Memory leak patterns
  6. 06Profiling tool references

Use cases

  1. 01Establishing an FPS or startup baseline
  2. 02Finding sources of bundle bloat
  3. 03Investigating JavaScript or native memory leaks
  4. 04Choosing tools to profile an app

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/maikotrindade/awesome-react-native-skills --skill react-native-performance

After installing, type/react-native-performancein Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/
best-practices-profiling.md
core-bundle-size.md
core-fps-rerenders.md
features-memory.md
features-native-performance.md
features-tti.md

Details

From the project README

React Native Performance

Deep performance reference. Canonical home for React Native performance — covers FlatList tuning, memoization, Hermes, expo-image, FPS measurement, bundle treemap analysis, Hermes mmap, R8 Android, 16 KB page-size alignment, view flattening, native threading, JNI memory patterns, and the profiling toolchain.

For Fabric/JSI/TurboModules architectural overview, see react-native-core/features-new-architecture.md.

Core References

TopicDescriptionReference
FPS & re-rendersFPS measurement, profile-react, React Compiler (Expo SDK 54+), atomic state, Concurrent React, Reanimated worklets (v3/v4)core-fps-rerenders
Bundle sizeApp size and JS bundle reduction — Ruler, Emerge, source-map-explorer, Expo Atlas, tree shaking, barrel exports, R8, asset catalog, Hermes mmap, code splittingcore-bundle-size

Features

TopicDescriptionReference
Time to InteractiveTTI measurement methodology, cold-start pipeline markers, react-native-performancefeatures-tti
Native performanceTurboModule threading, sync vs async, view flattening, native SDKs over JS polyfills, 16 KB alignment, platform setupfeatures-native-performance
MemoryJS leak detection, native reference cycles, JNI refs, smart pointers, common leak patternsfeatures-memory

Best Practices

TopicDescriptionReference
Profiling toolsDevTools flamegraph, Flashlight, Xcode Instruments, Android Studio Profiler, Perfetto, bundle analyzersbest-practices-profiling

Key Recommendations

  • Always measure first — never optimize without a baseline (Flashlight for FPS/TTI, source-map-explorer for bundle)
  • Hermes mmap removed in RN 0.79+ — JS bundle is now resident memory; bundle size affects startup memory directly
  • TurboModules — prefer sync methods for fast operations; async only when work crosses threads
  • React Compiler is opt-in via Expo SDK 54+ (experiments.reactCompiler: true) — replaces most useMemo/useCallback
  • Profile before refactoring — 80% of perf wins come from removing waterfalls, expensive renders, and bundle bloat, not micro-optimizations
  • Reanimated v3 stable; v4 opt-in/beta — pick one per project, don't mix

Comments

Markdown supported