Mobile App Performance Optimization

import React, { useState, useEffect } from 'react';
import { AppState } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

// Lazy load heavy components
const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

class AppLaunchOptimizer {
  static preloadCriticalData = async () => {
    // Load only essential data during app initialization
    try {
      const criticalData = await Promise.allSettled([
        AsyncStorage.getItem('user_token'),
        AsyncStorage.getItem('user_preferences'),
        // Avoid loading large datasets here
      ]);
      return criticalData;
    } catch (error) {
      console.error('Failed to preload critical data:', error);
    }
  };

  static deferNonCriticalTasks = () => {
    // Defer analytics, crash reporting, etc.
    setTimeout(() => {
      // Initialize analytics
      // Setup crash reporting
      // Load non-critical preferences
    }, 2000); // Defer by 2 seconds
  };

  static optimizeImageLoading = () => {
    // Preload critical images only
    const criticalImages = [
      require('./assets/splash-logo.png'),
      require('./assets/main-bg.png'),
    ];
    
    return criticalImages;
  };
}

const App = () => {
  const [isReady, setIsReady] = useState(false);
  const [appState, setAppState] = useState(AppState.currentState);

  useEffect(() => {
    const initializeApp = async () => {
      // Start critical tasks
      await AppLaunchOptimizer.preloadCriticalData();
      
      // Set app as ready
      setIsReady(true);
      
      // Defer non-critical tasks
      AppLaunchOptimizer.deferNonCriticalTasks();
    };

    initializeApp();

    // Handle app state changes for performance
    const handleAppStateChange = (nextAppState) => {
      if (appState.match(/inactive|background/) && nextAppState === 'active') {
        // App has come to foreground - optimize warm start
        console.log('App warm start optimization');
      }
      setAppState(nextAppState);
    };

    const subscription = AppState.addEventListener('change', handleAppStateChange);
    return () => subscription?.remove();
  }, [appState]);

  if (!isReady) {
    return <SplashScreen />; // Lightweight splash screen
  }

  return (
    <React.Suspense fallback={<LoadingScreen />}>
      <MainApp />
    </React.Suspense>
  );
};

export default App;

import { Image, Dimensions } from 'react-native';
import FastImage from 'react-native-fast-image';

class ImageOptimizer {
  static getOptimizedImageSize = (originalWidth, originalHeight, maxWidth = 300) => {
    const screenWidth = Dimensions.get('window').width;
    const targetWidth = Math.min(maxWidth, screenWidth * 0.8);
    
    if (originalWidth <= targetWidth) {
      return { width: originalWidth, height: originalHeight };
    }
    
    const ratio = targetWidth / originalWidth;
    return {
      width: targetWidth,
      height: originalHeight * ratio,
    };
  };

  static preloadCriticalImages = (imageUris) => {
    // Preload only critical images
    const criticalImages = imageUris.slice(0, 5); // Limit to first 5
    
    FastImage.preload(criticalImages.map(uri => ({
      uri,
      priority: FastImage.priority.high,
    })));
  };

  static createImageCache = () => {
    const cache = new Map();
    const maxSize = 50; // Limit cache size
    
    return {
      get: (key) => cache.get(key),
      set: (key, value) => {
        if (cache.size >= maxSize) {
          const firstKey = cache.keys().next().value;
          cache.delete(firstKey);
        }
        cache.set(key, value);
      },
      clear: () => cache.clear(),
      size: () => cache.size,
    };
  };
}

// Memory-efficient image component
const OptimizedImage = ({ uri, style, ...props }) => {
  const [dimensions, setDimensions] = useState(null);
  
  useEffect(() => {
    if (uri) {
      Image.getSize(uri, (width, height) => {
        const optimizedSize = ImageOptimizer.getOptimizedImageSize(width, height);
        setDimensions(optimizedSize);
      });
    }
  }, [uri]);

  if (!dimensions) {
    return <PlaceholderImage style={style} />;
  }

  return (
    <FastImage
      source={{ uri, priority: FastImage.priority.normal }}
      style={[style, dimensions]}
      resizeMode={FastImage.resizeMode.contain}
      onError={(error) => console.warn('Image loading error:', error)}
      {...props}
    />
  );
};

export default OptimizedImage;

import NetInfo from '@react-native-netinfo/netinfo';
import AsyncStorage from '@react-native-async-storage/async-storage';

class NetworkOptimizer {
  constructor() {
    this.requestQueue = [];
    this.isOnline = true;
    this.cache = new Map();
    this.initNetworkListener();
  }

  initNetworkListener = () => {
    NetInfo.addEventListener(state => {
      this.isOnline = state.isConnected;
      if (this.isOnline) {
        this.processQueuedRequests();
      }
    });
  };

  // Intelligent request batching
  batchRequests = (requests, batchSize = 3) => {
    const batches = [];
    for (let i = 0; i < requests.length; i += batchSize) {
      batches.push(requests.slice(i, i + batchSize));
    }
    return batches;
  };

  // Smart caching with TTL
  getCachedData = async (key, ttl = 300000) => { // 5 minutes default TTL
    try {
      const cached = await AsyncStorage.getItem(`cache_${key}`);
      if (cached) {
        const { data, timestamp } = JSON.parse(cached);
        if (Date.now() - timestamp < ttl) {
          return data;
        }
        await AsyncStorage.removeItem(`cache_${key}`);
      }
    } catch (error) {
      console.warn('Cache retrieval error:', error);
    }
    return null;
  };

  setCachedData = async (key, data) => {
    try {
      const cacheEntry = {
        data,
        timestamp: Date.now(),
      };
      await AsyncStorage.setItem(`cache_${key}`, JSON.stringify(cacheEntry));
    } catch (error) {
      console.warn('Cache storage error:', error);
    }
  };

  // Optimized fetch with retry logic
  optimizedFetch = async (url, options = {}, retries = 2) => {
    const cacheKey = `${url}_${JSON.stringify(options)}`;
    
    // Check cache first
    const cachedData = await this.getCachedData(cacheKey);
    if (cachedData) {
      return cachedData;
    }

    // If offline, queue request
    if (!this.isOnline) {
      return new Promise((resolve, reject) => {
        this.requestQueue.push({ url, options, resolve, reject });
      });
    }

    // Enhanced fetch with timeout and retry
    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), 10000); // 10s timeout

    try {
      const response = await fetch(url, {
        ...options,
        signal: controller.signal,
      });
      
      clearTimeout(timeoutId);
      
      if (!response.ok) {
        throw new Error(`HTTP ${response.status}`);
      }
      
      const data = await response.json();
      
      // Cache successful responses
      await this.setCachedData(cacheKey, data);
      
      return data;
    } catch (error) {
      clearTimeout(timeoutId);
      
      if (retries > 0 && error.name !== 'AbortError') {
        await new Promise(resolve => setTimeout(resolve, 1000)); // 1s delay
        return this.optimizedFetch(url, options, retries - 1);
      }
      
      throw error;
    }
  };

  processQueuedRequests = () => {
    const requests = [...this.requestQueue];
    this.requestQueue = [];
    
    requests.forEach(async ({ url, options, resolve, reject }) => {
      try {
        const result = await this.optimizedFetch(url, options);
        resolve(result);
      } catch (error) {
        reject(error);
      }
    });
  };

  // Preload critical data
  preloadData = async (urls) => {
    if (!this.isOnline) return;
    
    const batches = this.batchRequests(urls);
    
    for (const batch of batches) {
      await Promise.allSettled(
        batch.map(url => this.optimizedFetch(url))
      );
      // Small delay between batches to prevent overwhelming the network
      await new Promise(resolve => setTimeout(resolve, 100));
    }
  };
}

// Usage example
const networkOptimizer = new NetworkOptimizer();

export const useOptimizedApi = () => {
  const fetchData = async (endpoint) => {
    try {
      return await networkOptimizer.optimizedFetch(endpoint);
    } catch (error) {
      console.error('API call failed:', error);
      throw error;
    }
  };

  return { fetchData };
};

export default NetworkOptimizer;

import React, { memo, useMemo, useCallback } from 'react';
import { FlatList, View, Text, StyleSheet } from 'react-native';

// Memoized list item to prevent unnecessary re-renders
const ListItem = memo(({ item, onPress }) => {
  const handlePress = useCallback(() => {
    onPress(item.id);
  }, [item.id, onPress]);

  return (
    <TouchableOpacity style={styles.item} onPress={handlePress}>
      <Text style={styles.title}>{item.title}</Text>
      <Text style={styles.subtitle}>{item.subtitle}</Text>
    </TouchableOpacity>
  );
});

// Optimized FlatList implementation
const OptimizedList = ({ data, onItemPress }) => {
  // Memoize keyExtractor to prevent recreation
  const keyExtractor = useCallback((item) => item.id.toString(), []);
  
  // Memoize renderItem to prevent recreation
  const renderItem = useCallback(({ item }) => (
    <ListItem item={item} onPress={onItemPress} />
  ), [onItemPress]);
  
  // Pre-calculate item layout if dimensions are known
  const getItemLayout = useCallback((data, index) => ({
    length: 80, // Known item height
    offset: 80 * index,
    index,
  }), []);
  
  // Memoize list footer component
  const ListFooterComponent = useMemo(() => (
    <View style={styles.footer}>
      <Text>End of list</Text>
    </View>
  ), []);
  
  return (
    <FlatList
      data={data}
      keyExtractor={keyExtractor}
      renderItem={renderItem}
      getItemLayout={getItemLayout}
      ListFooterComponent={ListFooterComponent}
      // Performance optimizations
      removeClippedSubviews={true}
      maxToRenderPerBatch={10}
      updateCellsBatchingPeriod={50}
      initialNumToRender={10}
      windowSize={10}
      // Reduce memory footprint
      legacyImplementation={false}
      disableVirtualization={false}
    />
  );
};

const styles = StyleSheet.create({
  item: {
    height: 80,
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
    justifyContent: 'center',
  },
  title: {
    fontSize: 16,
    fontWeight: 'bold',
  },
  subtitle: {
    fontSize: 14,
    color: '#666',
    marginTop: 4,
  },
  footer: {
    padding: 20,
    alignItems: 'center',
  },
});

export default OptimizedList;

import React, { useRef, useEffect } from 'react';
import { Animated, Easing } from 'react-native';

const OptimizedAnimations = () => {
  const fadeAnim = useRef(new Animated.Value(0)).current;
  const scaleAnim = useRef(new Animated.Value(0.8)).current;
  const translateAnim = useRef(new Animated.Value(-100)).current;

  // Optimized fade in animation with native driver
  const fadeIn = useCallback(() => {
    Animated.timing(fadeAnim, {
      toValue: 1,
      duration: 300,
      useNativeDriver: true, // Essential for 60fps
      easing: Easing.out(Easing.cubic),
    }).start();
  }, [fadeAnim]);

  // Parallel animations for better performance
  const animateEntry = useCallback(() => {
    Animated.parallel([
      Animated.timing(fadeAnim, {
        toValue: 1,
        duration: 300,
        useNativeDriver: true,
      }),
      Animated.spring(scaleAnim, {
        toValue: 1,
        tension: 100,
        friction: 8,
        useNativeDriver: true,
      }),
      Animated.timing(translateAnim, {
        toValue: 0,
        duration: 400,
        useNativeDriver: true,
        easing: Easing.bezier(0.25, 0.46, 0.45, 0.94),
      }),
    ]).start();
  }, [fadeAnim, scaleAnim, translateAnim]);

  // Sequence animations with proper cleanup
  const sequentialAnimation = useCallback(() => {
    Animated.sequence([
      Animated.timing(scaleAnim, {
        toValue: 1.1,
        duration: 150,
        useNativeDriver: true,
      }),
      Animated.timing(scaleAnim, {
        toValue: 1,
        duration: 150,
        useNativeDriver: true,
      }),
    ]).start();
  }, [scaleAnim]);

  return (
    <Animated.View
      style={{
        opacity: fadeAnim,
        transform: [
          { scale: scaleAnim },
          { translateY: translateAnim },
        ],
      }}
    >
      {/* Your content here */}
    </Animated.View>
  );
};

#!/bin/bash
# React Native bundle analysis and optimization

# Generate bundle report
npx react-native bundle \
  --platform android \
  --dev false \
  --entry-file index.js \
  --bundle-output android-release.bundle \
  --sourcemap-output android-release.bundle.map

# Analyze bundle size
npx @react-native-community/cli bundle \
  --platform android \
  --dev false \
  --minify true \
  --verbose

# Check for unused dependencies
npx depcheck

# Analyze package sizes
npx bundle-phobia-cli

# Generate bundle visualization
npx react-native-bundle-visualizer

echo "Bundle analysis complete. Check the generated reports."

import { Dimensions, Platform } from 'react-native';
import DeviceInfo from 'react-native-device-info';

class DeviceOptimizer {
  static async getDeviceCapabilities() {
    const [totalMemory, usedMemory, deviceType] = await Promise.all([
      DeviceInfo.getTotalMemory(),
      DeviceInfo.getUsedMemory(),
      DeviceInfo.getDeviceType(),
    ]);
    
    const availableMemory = totalMemory - usedMemory;
    const screenData = Dimensions.get('screen');
    
    return {
      memory: {
        total: totalMemory,
        available: availableMemory,
        usage: (usedMemory / totalMemory) * 100,
      },
      screen: {
        width: screenData.width,
        height: screenData.height,
        scale: screenData.scale,
      },
      deviceType,
      platform: Platform.OS,
    };
  }
  
  static getPerformanceProfile(capabilities) {
    const { memory, screen } = capabilities;
    
    // Define performance tiers
    if (memory.total > 4000000000) { // > 4GB
      return 'high';
    } else if (memory.total > 2000000000) { // > 2GB
      return 'medium';
    } else {
      return 'low';
    }
  }
  
  static getOptimizedSettings(performanceProfile) {
    const settings = {
      high: {
        imageQuality: 1.0,
        animationDuration: 300,
        listPageSize: 50,
        cacheSize: 100,
        enableComplexAnimations: true,
      },
      medium: {
        imageQuality: 0.8,
        animationDuration: 200,
        listPageSize: 30,
        cacheSize: 50,
        enableComplexAnimations: true,
      },
      low: {
        imageQuality: 0.6,
        animationDuration: 150,
        listPageSize: 20,
        cacheSize: 25,
        enableComplexAnimations: false,
      },
    };
    
    return settings[performanceProfile] || settings.medium;
  }
}

// Usage in app
const useDeviceOptimization = () => {
  const [settings, setSettings] = useState(null);
  
  useEffect(() => {
    const initializeOptimization = async () => {
      const capabilities = await DeviceOptimizer.getDeviceCapabilities();
      const profile = DeviceOptimizer.getPerformanceProfile(capabilities);
      const optimizedSettings = DeviceOptimizer.getOptimizedSettings(profile);
      
      setSettings(optimizedSettings);
    };
    
    initializeOptimization();
  }, []);
  
  return settings;
};

export default useDeviceOptimization;