react-native-best-practices

Provide React Native performance optimization guidelines for FPS, TTI, and bundle size.

1|Updated Feb 24, 2026
One-click install
npx skills add https://github.com/xurenlu/marstaff --skill react-native-best-practices-xurenlu
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-native-best-practices
Source: https://github.com/xurenlu/marstaff/tree/main/skills/react-native-best-practices
Command: npx skills add https://github.com/xurenlu/marstaff --skill react-native-best-practices-xurenlu

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides comprehensive guidelines and actionable steps to significantly improve the performance of React Native applications, addressing issues like jank, slow startup, and large app sizes.

Core Features & Use Cases

  • Performance Diagnosis: Identify bottlenecks in UI rendering, startup time, and bundle size.
  • Optimization Strategies: Offers detailed solutions for JavaScript/React performance, native code optimization, and bundle size reduction.
  • Use Case: Debugging a React Native app that feels sluggish during scrolling and has a slow startup time by applying the recommended optimizations for lists, animations, and bundle analysis.

Quick Start

Use the react-native-best-practices skill to analyze and improve the performance of a React Native application.

Frequently Asked Questions about react-native-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix jank and frame drops in React Native?

To fix React Native jank and frame drops, optimize JavaScript thread blocking, reduce bridge overhead, and apply FlashList for efficient list rendering. Profiling helps identify specific bottlenecks causing UI stutter.

What is the best way to reduce React Native bundle size?

The best way to reduce React Native bundle size involves analyzing the bundle structure and applying specific optimization strategies. This includes minimizing import bloat and optimizing Hermes engine usage for a smaller footprint.

How do I optimize React Native startup time and TTI?

Optimize React Native startup time and TTI by configuring the Hermes engine, reducing initial JavaScript thread blocking, and streamlining native module initialization. Profiling components helps isolate slow-loading dependencies.

Why does my React Native app feel sluggish during scrolling?

Your React Native app feels sluggish during scrolling due to UI rendering bottlenecks and excessive re-renders. Replacing standard lists with FlashList and optimizing animation overhead resolves these performance issues.

Can I use Hermes optimization for React Native performance issues?

Yes, you can use Hermes optimization to improve React Native performance. Hermes reduces memory leaks, decreases bundle size, and minimizes JavaScript thread blocking, directly enhancing app FPS and startup times.

How do I profile memory leaks and re-renders in React Native?

Profile memory leaks and re-renders in React Native by using built-in debugging commands and performance guidelines. Structured profiling isolates bridge overhead and native module inefficiencies to prevent frame drops.