JubaKitiashvili/performance-optimization

Performance Optimization

You are performing a systematic performance diagnosis on a React Native application. Follow this step-by-step process.

When to Use This Skill

Invoke when:

• App feels slow or janky
• Startup time is too long
• Lists scroll poorly
• Animations stutter
• Bundle size is too large
• Memory usage is high

Diagnostic Process

Step 1: Identify the Problem

| Symptom | Likely Cause | First Check | |---------|-------------|-------------| | Slow startup | Large bundle, heavy init | Bundle size, eager imports | | Janky scrolling | List renderer, heavy cells | FlatList vs FlashList, cell complexity | | Stuttering animations | JS thread blocking | Worklets, useAnimatedStyle | | High memory | Leaks, large images | Image caching, subscription cleanup | | Slow navigation | Heavy screens, eager loading | Lazy loading, screen weight |

Step 2: Measure

Bundle Analysis:

npx react-native-bundle-visualizer
# or for Expo:
npx expo export --dump-sourcemap

Target: < 1.5MB JavaScript bundle

FPS Monitoring:

• Enable Perf Monitor in dev menu
• Or use useFrameCallback from Reanimated
• Target: 60fps constant, no drops below 55fps

TTI (Time to Interactive):

• Measure from app launch to first interactive frame
• Target: < 2 seconds on mid-range device

Memory:

• Use Xcode Instruments (iOS) or Android Profiler
• Watch for monotonically increasing memory (leak indicator)

Step 3: Optimize by Category

Bundle Size:

1. Analyze imports — find large dependencies
2. Lazy load screens: React.lazy() with Suspense
3. Tree-shake unused exports
4. Replace large libraries with lighter alternatives
5. Use Hermes (enabled by default in Expo SDK 50+)

Rendering:

1. Replace FlatList with FlashList + estimatedItemSize
2. Memoize expensive components: React.memo
3. Use useCallback for event handlers passed to children
4. Avoid inline object/array creation in JSX
5. Profile re-renders with React DevTools Profiler

Animations:

1. Move all animations to UI thread (Reanimated worklets)
2. Use useAnimatedStyle instead of inline animated values
3. Batch related animations with withSequence/withDelay
4. Reduce animated property count (transform is cheaper than layout)
5. Use cancelAnimation for cleanup

Images:

1. Use expo-image with cachePolicy="memory-disk"
2. Serve correct sizes (don't scale 4K images to thumbnails)
3. Use WebP format for smaller file sizes
4. Implement progressive loading (blurhash placeholder)

Memory:

1. Clean up listeners in useEffect return
2. Remove event subscriptions on unmount
3. Use WeakRef for caches where appropriate
4. Paginate large data sets (don't load all at once)

Step 4: Verify Improvements

Re-measure after each optimization:

## Performance Report

| Metric | Before | After | Target | Status |
|--------|--------|-------|--------|--------|
| Bundle size | 2.1MB | 1.4MB | <1.5MB | PASS |
| TTI | 3.2s | 1.8s | <2s | PASS |
| List FPS | 45fps | 60fps | 60fps | PASS |
| Memory (5min) | +80MB | +12MB | <20MB | PASS |