react-native-best-practices

Diagnose React Native performance issues like FPS, TTI, and bundle size.

13|1|Updated Oct 13, 2023

Search Tags:#performance #debugging #optimization #profiling #react-native #jank

Ready to run

npx skills add https://github.com/luke-h1/foam --skill react-native-best-practices-luke-h1

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides comprehensive guidelines and tools to diagnose and resolve performance issues in React Native applications, ensuring a smooth and responsive user experience.

Core Features & Use Cases

Performance Profiling: Identify bottlenecks in UI rendering, startup time, and memory usage.
Optimization Strategies: Apply best practices for JavaScript, native code, and bundle size reduction.
Use Case: Debugging a React Native app that feels janky during scrolling or animations by using profiling tools and applying targeted fixes like using FlashList or optimizing native modules.

Quick Start

Use the react-native-best-practices skill to analyze the performance of a React Native list component.

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 jank and frame drops during scrolling?▼

To fix React Native jank, use profiling tools to identify bottlenecks and apply targeted optimizations like replacing lists with FlashList or reducing native module overhead.

What's the best way to optimize React Native bundle size and memory leaks?▼

Optimize React Native bundle size and memory leaks by applying JavaScript optimization strategies, analyzing memory usage during profiling, and resolving native code bottlenecks.

How does Hermes optimization affect React Native startup time and TTI?▼

Hermes optimization improves React Native startup time and TTI by reducing JavaScript thread blocking and minimizing bridge overhead, resulting in a smoother user experience.

Can I use FlashList to resolve list rendering bottlenecks in React Native?▼

Yes, you can use FlashList to resolve list rendering bottlenecks in React Native by replacing standard lists to optimize UI rendering and reduce frame drops.

Why does my React Native app feel unresponsive during animations?▼

Your React Native app feels unresponsive during animations due to JS thread blocking or bridge overhead, which you can diagnose using performance profiling to apply targeted fixes.