skills.rest
budgie-at
budgie-atOFFICIAL
Explore all skills by this author →
WebsiteGitHub

react-native-best-practices

Identify and fix React Native performance bottlenecks using profiling tools.

5|1|Updated Sep 26, 2025
Search Tags:#performance#optimization#profiling#react-native#hermes#jank
One-click install
npx skills add https://github.com/budgie-at/budgie --skill react-native-best-practices-budgie-at
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-native-best-practices
Source: https://github.com/budgie-at/budgie/tree/main/.agents/skills/react-native-best-practices
Command: npx skills add https://github.com/budgie-at/budgie --skill react-native-best-practices-budgie-at

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Provides structured guidance to optimize performance in React Native apps, helping teams reduce jank, lower startup times, and minimize memory usage.

Core Features & Use Cases

  • Pattern library: Consolidated best-practice patterns for Hermes optimization, list virtualization, memory management, and re-render reduction.
  • Profiling & diagnostics: Techniques for profiling FPS, TTI, and memory usage using React Native DevTools, Hermes, and Perf Monitor.
  • Use cases: Examples include eliminating list jank in dense feeds, reducing bundle size by avoiding barrel imports, and improving scroll performance across complex screens.

Quick Start

Start with a quick app audit using the React Native DevTools profiler; identify top bottlenecks (frames dropped, long re-renders, heavy lists); apply recommended patterns; verify improvements with profiling tools.

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 React Native performance bottlenecks like dropped frames and slow startup?▼

Identify and fix React Native performance bottlenecks by profiling FPS, TTI, and memory with React Native DevTools and Hermes, then applying best-practice patterns like list virtualization to reduce jank and startup times.

Why does my React Native app have list jank in dense feeds and how can I resolve it?▼

List jank in dense feeds is caused by improper list virtualization and heavy component rendering. Resolve it by applying proper list virtualization patterns and UI thread optimizations identified through profiling.

What is the best way to reduce bundle size and memory usage in a React Native app?▼

Reduce bundle size and memory usage by avoiding barrel imports and implementing memory-safe component patterns, then verify the improvements by profiling memory usage with Hermes and Perf Monitor.

Does this React Native optimization guidance work for both Expo and bare RN projects on iOS and Android?▼

Yes, this optimization guidance is applicable to iOS and Android apps using either Expo or bare React Native, providing consolidated best-practice patterns for Hermes optimization and memory management across both setups.

How do I profile React Native scroll performance and re-render issues?▼

Profile React Native scroll performance and re-render issues by using the React Native DevTools profiler and Perf Monitor to measure FPS and identify long re-renders, then apply re-render reduction patterns to verify improvements.

Related Skills

Explore More Software Engineering Skills→
driftinglydriftingly
1

react-native-best-practices

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

Community
Advanced
callstackincubatorcallstackincubator
1.6k

react-native-best-practices

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

Official
Advanced
epiphanyappsepiphanyapps

react-native-best-practices

Provides React Native performance optimization for FPS, TTI, bundle size, memory leaks, re-renders, animations, Hermes, FlashList, native modules, and debugging jank and frame drops.

Official
Intermediate
hkcm91hkcm91

optimizing-performance

Improves WebGL app speed by profiling bottlenecks and optimizing code.

Community
Advanced