skills.rest
luke-h1
luke-h1COMMUNITY
Explore all skills by this author →
WebsiteGitHub

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

Related Skills

Explore More Software Engineering Skills→
beemanbeeman
12

vercel-react-native-skills

Codify React Native and Expo performance best practices for mobile apps.

Community
Advanced
vitalyiegorovvitalyiegorov
7

react-native-best-practices

Analyze React Native bundle size and optimize FPS, TTI, and memory leaks.

Community
Advanced
Arupbiswas09Arupbiswas09

react-native-best-practices

Optimize React Native app performance with Hermes and bundling guidelines.

Community
Advanced
hwj123hwjhwj123hwj
4

react-native-best-practices

Optimize React Native app performance across FPS, TTI, bundle size, and memory leaks.

Community
Advanced