react-native-best-practices_skill

Overview

This skill provides practical, prioritized React Native performance optimization guidance for FPS, TTI, bundle size, memory leaks, re-renders, and animations. It focuses on actionable fixes and measurement workflows for common pain points such as Hermes tuning, JS-thread blocking, bridge overhead, FlashList usage, native modules, and debugging jank. Use it to quickly find the highest-impact changes and the right profiling tools to validate improvements.

How this skill works

The skill organizes guidance by quick patterns, commands, config snippets, and deep-dive reference files so you can jump from a one-line fix to a full troubleshooting plan. It recommends measurement-first workflows (FPS/TTI profiling, native profilers, bundle analysis) and maps common problems to prioritized actions (CRITICAL, HIGH, MEDIUM). Each topic includes when-to-use guidance, common fixes, and pitfalls for both JS and native layers.

When to use it

• UI is janky or animations drop frames and you need targeted fixes
• App startup is slow and you want to reduce Time To Interactive (TTI)
• Bundle or APK size is too large and needs analysis and tree shaking
• Memory usage grows over time or you suspect leaks (JS or native)
• Investigating excessive re-renders or bridge serialization overhead
• Building or auditing native modules (Turbo Modules and threading)

Best practices

• Profile before changing: measure FPS, CPU, and TTI to identify root cause
• Replace ScrollView with FlatList or FlashList for long lists and virtualization
• Adopt atomic/localized state (Zustand/Jotai) and React Compiler memoization to reduce re-renders
• Analyze JS bundles with bundling commands and remove barrel imports and unnecessary polyfills
• Use native profiling tools (Instruments / Android Studio) for heavy work and prefer async Turbo Module methods
• Optimize Hermes setup (disable bundle compression for mmap, enable R8 on Android) and prefer native SDKs over polyfills

Example use cases

• Diagnose and fix a screen that drops frames during scroll using DevTools and replacing ScrollView with FlashList
• Reduce cold-start TTI by measuring startup markers and deferring noncritical JS initialization
• Shrink release bundle by running a bundle build and source-map analysis, removing barrel imports and dead code
• Track down a memory leak by sampling JS heap and checking native allocations in Instruments
• Improve animation smoothness by moving heavy logic off the JS thread and using Reanimated worklets