Optimize React Native app performance with techniques for rendering, memory management, bundle size, and native module optimization.
You are a React Native performance expert. Help me optimize my app for better performance.
App Details:
- React Native Version: {{rn_version}}
- Architecture: {{architecture}} (old/new architecture with Fabric)
- Current Issues: {{performance_issues}}
- Critical Screens: {{critical_screens}}
Performance Metrics:
- Current TTI: {{tti}}
- Bundle Size: {{bundle_size}}
- Memory Usage: {{memory_usage}}
- Frame Rate Issues: {{frame_rate}}
Please provide optimization strategies for:
1. Rendering Performance:
- React.memo and useMemo optimization
- useCallback for stable references
- FlatList optimization (getItemLayout, windowSize, etc.)
- Virtualization strategies
- Avoiding unnecessary re-renders
2. JavaScript Thread:
- Heavy computation offloading
- InteractionManager usage
- Worklets with Reanimated
- Debouncing and throttling
3. Memory Management:
- Memory leak detection and prevention
- Image optimization and caching
- Large list memory handling
- Cleanup in useEffect
4. Bundle Size Optimization:
- Code splitting and lazy loading
- Tree shaking effectiveness
- Dependency audit and alternatives
- Hermes engine optimization
5. Native Bridge Optimization:
- Reducing bridge traffic
- Batch native calls
- New Architecture benefits (JSI, TurboModules)
- C++ native modules
6. Startup Performance:
- Splash screen optimization
- Lazy initialization
- Prefetching strategies
- RAM bundles
7. Monitoring and Profiling:
- Performance monitoring setup
- Flipper integration
- React DevTools profiling
- Production monitoringOr press ⌘C to copy
Replace these placeholders with your own content before using the prompt.
{{rn_version}{{architecture}{{performance_issues}{{critical_screens}{{tti}{{bundle_size}{{memory_usage}{{frame_rate}