skills.rest
driftingly
driftinglyCOMMUNITY
Explore all skills by this author →
Website𝕏@driftinglyGitHub

react-native-best-practices

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

1|Updated Feb 13, 2021
Search Tags:#bundle size#performance optimization#memory leaks#fps#react-native#tti
One-click install
npx skills add https://github.com/driftingly/dotfiles --skill react-native-best-practices-driftingly
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-native-best-practices
Source: https://github.com/driftingly/dotfiles/tree/main/config/claude/skills/react-native-best-practices
Command: npx skills add https://github.com/driftingly/dotfiles --skill react-native-best-practices-driftingly

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill provides guidelines and best practices for optimizing React Native applications, addressing performance issues like FPS, TTI, bundle size, memory leaks, re-renders, and animations.

Core Features & Use Cases

  • Performance Optimization: Offers detailed strategies for improving FPS, TTI, and overall performance.
  • Bundle Size Reduction: Techniques for decreasing app size and improving load times.
  • Memory Management: Guidance on identifying and resolving memory leaks.
  • Use Cases: Useful for developers looking to enhance the performance of their React Native apps, especially those involving complex animations, heavy data processing, or extensive use of native modules.

Quick Start

Run the skill to get performance optimization guidelines for your React Native app.

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 optimize React Native performance and reduce frame drops?▼

To optimize React Native performance, you must address JS thread blocking and bridge overhead. This involves debugging jank, minimizing re-renders, and optimizing animations to maintain a high FPS.

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

Reducing React Native bundle size improves load times and Time to Interactive (TTI). You can achieve this by applying specific bundling optimizations and leveraging Hermes engine optimizations for JavaScript execution.

How do I identify and resolve memory leaks in a React Native app?▼

Identifying memory leaks in a React Native app requires analyzing component lifecycles and native module usage. Resolving them involves cleaning up subscriptions and references to prevent memory retention during navigation.

Does this React Native optimization guidance cover iOS and Android native modules?▼

Yes, the React Native optimization guidelines cover native modules for both iOS and Android. They address bridge overhead and provide strategies for optimizing native code alongside JavaScript and React layers.

When should I use FlashList to fix scrolling jank in React Native?▼

You should use FlashList to fix scrolling jank in React Native when rendering large lists causes frame drops. It replaces standard lists to minimize memory usage and improve overall rendering performance.

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
layeddielayeddie
1

performance-profiling

Analyze BEAM-based Elixir applications to identify performance bottlenecks.

Community
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
PostalocityPostalocity
1

mobile-developer

Guide iOS and Android development with Swift, Kotlin, and cross-platform frameworks.

Official
Intermediate