react-native-best-practices

This skill provides a comprehensive performance optimization framework for React Native developers, based on Callstack's "Ultimate Guide to React Native Optimization." It is designed for engineers aiming to improve app responsiveness, reduce startup times, and minimize technical debt in large-scale mobile projects. The skill acts as an AI-powered consultant, offering structured diagnostic workflows and tactical fixes for common performance bottlenecks.

• Advanced profiling techniques using React DevTools, Xcode Instruments, and Android Studio CPU Profiler to identify jank and frame drops.

• Strategies for optimizing JS/React rendering, including proper use of FlashList, atomic state management with Jotai or Zustand, and automatic memoization with React Compiler.

• Deep-dive bundle optimization techniques including bundle analysis, tree shaking, and R8 configuration for Android native code.

• Memory management patterns for identifying and resolving JS-side and native-side memory leaks.

• TTI (Time to Interactive) reduction through native navigation optimization, Hermes VM tuning, and strategic module loading.

• Reference these guidelines during performance audits, code reviews, or when investigating production incidents involving slow interactions or UI freezes.

• Inputs typically include code snippets for review, profiling data (re-render counts, commit timelines), or error reports related to performance thresholds.

• Outputs provide actionable diagnostics, suggested code refactors, configuration changes, and verification steps (Measure → Optimize → Re-measure → Validate).

• Adhere to the provided review guardrails to prevent speculative optimizations; only apply fixes supported by profiling evidence or clear anti-pattern identification.

• Security constraints: ensure all shell commands are reviewed locally and avoid piping untrusted scripts; verify third-party library provenance.