react-native-best-practices

Identify and apply React Native performance best practices for app responsiveness.

6|Updated Jan 24, 2025

Search Tags:#performance #optimization #profiling #devtools #react-native #hermes #tti

Ready to run

npx skills add https://github.com/Liinkiing/larastack --skill react-native-best-practices-liinkiing

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-native-best-practices
Source: https://github.com/Liinkiing/larastack/tree/main/.agents/skills/react-native-best-practices
Command: npx skills add https://github.com/Liinkiing/larastack --skill react-native-best-practices-liinkiing

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Provides guidance to optimize React Native apps by adopting performance best practices, reducing re-renders, and tightening startup times.

Core Features & Use Cases

Performance profiling and debugging workflows with RN DevTools, Hermes, and list rendering optimizations.
Cross-cutting optimization guidance for JavaScript, native modules, and bundling to improve frame rate and startup.
Use Case: When a React Native app feels sluggish during scrolling or on startup, apply best practices to regain smoothness and responsiveness.

Quick Start

Scan code for common performance patterns, enable recommended tooling, and incrementally adopt selected optimizations (such as trimming polyfills, adopting native navigators, and enabling tree shaking). Then measure FPS and TTI improvements to verify impact.

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 slow React Native startup time and reduce TTI?▼

Improve React Native startup time by trimming polyfills, enabling bundle tree shaking, and adopting native navigators. Measure TTI improvements using RN Performance markers to verify the impact on app responsiveness.

Why does my React Native app feel sluggish during scrolling?▼

Your React Native app feels sluggish due to excessive re-renders and unoptimized list rendering. Apply list rendering optimizations and profile with React DevTools to regain frame rate smoothness.

How to profile React Native performance using Hermes and DevTools?▼

Profile React Native performance by leveraging React DevTools and Hermes engine internals. Use RN Performance markers to trace UI responsiveness and identify slow JavaScript or native module bottlenecks.

Do I need the React Native New Architecture to optimize app performance?▼

Familiarity with the React Native New Architecture is required to fully apply these optimizations. It enables cross-cutting guidance for native modules and JavaScript bundling to improve frame rate and startup.

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

Reduce React Native bundle size by configuring Metro or Repack for tree shaking and removing unused polyfills. This tightens bundling workflows to improve startup times and overall app responsiveness.