react-performance
React Native performance optimization guide. Use when working on performance issues, optimizing renders, improving startup time, debugging memory leaks, optimizing lists/animations, or analyzing bundle size. Covers profiling, memoization, React Compiler, Concurrent React, state patterns, FlatList optimization, Reanimated, native threading, and bundle optimization.
When & Why to Use This Skill
This Claude skill is a comprehensive React Native performance optimization guide designed to help developers diagnose and resolve mobile application bottlenecks. It provides actionable strategies for fixing memory leaks, reducing unnecessary re-renders, improving app startup times, and optimizing UI responsiveness. By leveraging modern tools like the React Compiler, Flashlight, and Reanimated, it ensures high-performance mobile experiences through a structured 'measure-first' methodology.
Use Cases
- Case 1: Diagnosing and fixing frame drops in complex lists and scrolling components using FlatList virtualization and layout optimization.
- Case 2: Identifying and resolving memory leaks by analyzing heap snapshots and allocation patterns to prevent app crashes.
- Case 3: Optimizing application startup time (TTI) through bundle analysis, lazy loading, and Hermes engine configuration.
- Case 4: Eliminating redundant component re-renders by implementing efficient state patterns, memoization, and the React Compiler.
- Case 5: Debugging animation performance issues by offloading work to the UI thread using Reanimated worklets and native drivers.
| name | react-performance |
|---|---|
| description | React Native performance optimization guide. Use when working on performance issues, optimizing renders, improving startup time, debugging memory leaks, optimizing lists/animations, or analyzing bundle size. Covers profiling, memoization, React Compiler, Concurrent React, state patterns, FlatList optimization, Reanimated, native threading, and bundle optimization. |
React Native Performance
How to Use This Skill
- Read ONLY this file first - Don't load references yet
- Use Quick Diagnosis table to identify the ONE relevant reference
- Load ONLY that reference - Never load multiple references at once
- If user's problem is unclear - Ask clarifying questions before loading any reference
⚠️ Each reference file is 5-10KB. Loading multiple files wastes context. Be surgical.
Comprehensive guide for optimizing React Native applications. Always measure before optimizing - use profiling tools to identify actual bottlenecks.
Quick Diagnosis
| Symptom | Start With |
|---|---|
| Too many re-renders | rerender-optimization.md |
| Slow lists/scrolling | list-optimization.md |
| App takes long to start | startup-optimization.md |
| Memory keeps growing | memory-management.md |
| Animations dropping frames | animation-performance.md |
| Bundle too large | bundle-optimization.md |
Don't know where the problem comes from?
Ask the user first:
- What feels slow? (startup, scroll, animation, interaction)
- When does it happen?
- Which screen/component?
Then load profiling.md ONLY if you need help guiding them through profiling.
Reference Files
Loading strategy: Pick ONE file based on the diagnosed symptom. Never preload "just in case".
🔬 Investigation
- profiling.md - React DevTools, JS Profiler, Flashlight, Perf Monitor. Use to identify unknown bottlenecks.
🧠 Memory
- memory-management.md - Heap snapshots, allocation tracking, common leak patterns.
⚛️ React Optimization
- rerender-optimization.md - Why components re-render, anti-patterns, prevention strategies.
- memoization.md -
useMemo,useCallback,React.memousage and pitfalls. - react-compiler.md - Automatic memoization, Rules of React, when compiler can't optimize.
- concurrent-react.md -
startTransition,useDeferredValue,<Activity>,Suspensefor responsive UI. - state-patterns.md - State colocation, Zustand selectors, uncontrolled components.
📱 Runtime Performance
- list-optimization.md -
FlatList,SectionList, virtualization,getItemLayout. - animation-performance.md - Reanimated worklets, UI thread, native driver, gesture handling.
🚀 Startup & Bundle
- startup-optimization.md - TTI optimization, lazy loading, Hermes, deferred initialization.
- bundle-optimization.md - Bundle analysis, tree shaking, barrel exports, lightweight alternatives.
🔧 Native Layer
- threading-model.md - JS thread, UI thread, Fabric, JSI architecture.
- native-optimization.md - View flattening, native SDKs, shadow optimization, layout batching.
Performance Targets
| Metric | Target | Tool |
|---|---|---|
| FPS | 60 (ideally 120 on capable devices) | Perf Monitor, Flashlight |
| TTI | < 2s cold start | Native profilers |
| JS Frame | < 16ms (8ms for 120fps) | JS Profiler |
| Memory | Stable over time (no growth) | Heap snapshots |
Optimization Workflow
- Measure - Profile the app, identify the actual bottleneck
- Isolate - Reproduce the issue in a minimal scenario
- Fix - Apply targeted optimization from relevant reference
- Verify - Re-measure to confirm improvement
- Monitor - Set up continuous performance tracking
Key Principles
- Measure first: Never optimize based on assumptions
- 80/20 rule: 80% of issues come from 20% of code
- JS thread < 16ms: Keep frame budget for 60 FPS
- Minimize bridge crossing: Batch operations, use native drivers
- Virtualize large lists: Never render off-screen content
- Defer non-critical work: Use
startTransitionand lazy loading