Concept 10: Performance Optimization

// Optimize images for mobile devices
const OptimizedImage = ({ source, width, height }) => {
  return (
    <Image
      source={source}
      style={{ width, height }}
      resizeMode="cover"
      // Enable native optimizations
      fadeDuration={200}
      // Reduce memory usage
      defaultSource={require('./placeholder.png')}
    />
  );
};

// For web images, use optimized formats
const WebImage = ({ uri, width, height }) => {
  const optimizedUri = `${uri}?w=${width}&h=${height}&f=webp&q=80`;
  
  return (
    <Image
      source={{ uri: optimizedUri }}
      style={{ width, height }}
      resizeMode="cover"
    />
  );
};

// Optimize large lists for smooth scrolling
const OptimizedFlatList = ({ data, renderItem }) => {
  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      // Performance props
      removeClippedSubviews={true}
      maxToRenderPerBatch={10}
      updateCellsBatchingPeriod={50}
      initialNumToRender={10}
      windowSize={10}
      // Enable native optimizations
      getItemLayout={(data, index) => ({
        length: 80, // Item height
        offset: 80 * index,
        index,
      })}
      keyExtractor={(item, index) => item.id || index.toString()}
    />
  );
};

import React, { memo } from 'react';

// Prevent unnecessary re-renders
const OptimizedComponent = memo(({ title, description, onPress }) => {
  return (
    <TouchableOpacity onPress={onPress} style={styles.container}>
      <Text style={styles.title}>{title}</Text>
      <Text style={styles.description}>{description}</Text>
    </TouchableOpacity>
  );
});

// Only re-render when props actually change
export default OptimizedComponent;

// Use useMemo for expensive calculations
const ExpensiveComponent = ({ items, filter }) => {
  const filteredItems = useMemo(() => {
    return items.filter(item => item.category === filter);
  }, [items, filter]);

  const expensiveCalculation = useMemo(() => {
    return filteredItems.reduce((sum, item) => sum + item.value, 0);
  }, [filteredItems]);

  return (
    <View>
      <Text>Total: {expensiveCalculation}</Text>
      <FlatList data={filteredItems} renderItem={renderItem} />
    </View>
  );
};

// Use dynamic imports for large dependencies
const HeavyComponent = lazy(() => import('./HeavyComponent'));

// Conditional loading
const ConditionalFeature = ({ showAdvanced }) => {
  const [AdvancedComponent, setAdvancedComponent] = useState(null);
  
  useEffect(() => {
    if (showAdvanced && !AdvancedComponent) {
      import('./AdvancedComponent').then(module => {
        setAdvancedComponent(() => module.default);
      });
    }
  }, [showAdvanced]);
  
  return showAdvanced && AdvancedComponent ? <AdvancedComponent /> : null;
};

// Clean up subscriptions and timers
const OptimizedComponent = () => {
  useEffect(() => {
    const subscription = someService.subscribe(handleData);
    const timer = setInterval(updateData, 1000);
    
    return () => {
      subscription.unsubscribe();
      clearInterval(timer);
    };
  }, []);

  return <View>{/* Component content */}</View>;
};

// Simple performance monitoring
class PerformanceMonitor {
  static startTimer(label: string) {
    console.time(label);
  }
  
  static endTimer(label: string) {
    console.timeEnd(label);
  }
  
  static measureRender(componentName: string, renderFunction: () => JSX.Element) {
    const start = performance.now();
    const result = renderFunction();
    const end = performance.now();
    
    if (end - start > 16) { // Slower than 60fps
      console.warn(`Slow render in ${componentName}: ${end - start}ms`);
    }
    
    return result;
  }
}

// Usage in components
const MyComponent = () => {
  PerformanceMonitor.startTimer('MyComponent render');
  
  const result = (
    <View>
      {/* Component content */}
    </View>
  );
  
  PerformanceMonitor.endTimer('MyComponent render');
  return result;
};