skills.rest
Liinkiing
LiinkiingCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/Liinkiing/larastack --skill react-native-best-practices-liinkiing
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
callstackincubatorcallstackincubator
1.6k

react-native-best-practices

Profile and optimize React Native performance bottlenecks across JavaScript and native layers.

Official
Advanced
hathbangerhathbanger

vercel-react-best-practices

Apply React and Next.js performance best practices to reduce bundle size.

Community
Advanced
FutureAtomsFutureAtoms
1

react-native-2026-expo-dev-workflow

Guide React Native Expo SDK 54 development builds and debugging with DevTools.

Community
Advanced
boraoztuncboraoztunc
248

conductor-rewrite-performance

Profile React desktop app re-renders with Tauri bridge shims and TanStack Router.

Community
Advanced