react-native-best-practices

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

1.6k|115|Updated Jan 14, 2026

Search Tags:#performance #optimization #profiling #fps #react-native #bundle-size #tti

Ready to run

npx skills add https://github.com/callstackincubator/agent-skills --skill react-native-best-practices-callstackincubator

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

React Native performance bottlenecks across JS and native layers can degrade user experience; this Skill provides structured, actionable patterns to profile, diagnose, and optimize FPS, startup time, bundle size, memory, and re-renders.

Core Features & Use Cases

Profiling patterns for FPS, re-renders, and jank across JavaScript and native threads.
Bundle & startup optimizations including tree shaking, code-splitting, and native integrations.
Memory and native module guidance for detecting leaks, Turbo Modules, and performance pitfalls.

Quick Start

Review the guidelines, identify bottlenecks in your RN project, and begin applying the recommended optimizations to improve responsiveness

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 identify React Native performance bottlenecks causing low FPS?▼

To identify React Native performance bottlenecks causing low FPS, use profiling patterns to monitor JavaScript and native threads for jank and re-renders. This diagnoses framerate drops across both layers to improve user-facing responsiveness.

What is the best way to optimize React Native bundle size and TTI?▼

The best way to optimize React Native bundle size and TTI is by applying tree shaking, code-splitting, and native integrations. These startup optimizations reduce the initial load time and overall application payload.

How do I detect memory leaks in a React Native application?▼

To detect memory leaks in a React Native application, apply structured memory profiling guidance to monitor JavaScript and native components. This identifies leaks and native module performance pitfalls affecting stability.

Does this approach support profiling jank with Hermes?▼

Yes, this approach supports profiling jank with Hermes by diagnosing performance issues across JavaScript and native threads. It applies optimization guidelines to debug framerate drops and improve runtime execution within the Hermes engine.

Why does my React Native app have slow animations and how do I fix them?▼

Slow React Native animations often stem from JavaScript thread bottlenecks blocking the native UI thread. Fix them by profiling re-renders and applying structured optimization patterns to smooth out user-facing framerates.

When should I use Turbo Modules for React Native performance optimization?▼

Use Turbo Modules for React Native performance optimization when native integrations require faster communication between JavaScript and native layers. They help resolve native module performance pitfalls and reduce startup overhead.