React Native Performance Optimization: Fast and Smooth Apps

{
  "expo": {
    "jsEngine": "hermes",
    "hermes": {
      "compression": "brotli"
    }
  }
}

// For bare React Native - app.json
{
  "name": "MyApp",
  "version": "1.0.0",
  "react-native": {
    "jsEngine": "hermes"
  }
}

// android/app/build.gradle
project.ext.react = [
    enableHermes: true,
]

// ios/Podfile
:hermes_enabled => true

import { NativeModules } from 'react-native';

const { HermesEngine } = NativeModules;

function checkEngine() {
  if (HermesEngine) {
    console.log('Hermes enabled:', HermesEngine.isEnabled?.());
  } else {
    console.log('Hermes not detected');
  }
}

// Hermes supports modern JS but has some differences

// ✅ Supported - Nullish coalescing
const value = input ?? defaultValue;

// ✅ Supported - Optional chaining
const name = user?.profile?.name;

// ✅ Supported - BigInt
const big = BigInt(9007199254740991);

// ❌ Avoid - Proxy (not supported in Hermes)
// const proxy = new Proxy(target, handler);

// ❌ Avoid - Symbol.toStringTag
// class MyClass { get [Symbol.toStringTag]() { return 'MyClass'; } }

// ✅ Use - JSON.parse/stringify (Hermes has optimized implementation)
const data = JSON.parse(jsonString);

// ✅ Use - Array methods (optimized in Hermes)
const filtered = items.filter(item => item.active).map(item => item.name);

// C++ TurboModule spec for CalendarModule
#include <react/renderer/components/MyModuleSpec/MyModuleSpecJSI.h>

class CalendarModuleSpecJSI : public JObjectWrapper {
 public:
  static void install(jsi::Runtime &runtime) {
    auto module = std::make_shared<CalendarModule>();
    
    jsi::Object moduleObj(runtime);
    moduleObj.setProperty(
      runtime,
      "createEvent",
      jsi::Function::createFromHostFunction(
        runtime,
        jsi::PropNameID::forAscii(runtime, "createEvent"),
        1,
        [module](jsi::Runtime &rt,
                 const jsi::Value &thisVal,
                 const jsi::Value *args,
                 size_t count) -> jsi::Value {
          std::string title = args[0].asString(rt).utf8(rt);
          auto result = module->createEvent(title);
          return jsi::String::createFromUtf8(rt, result);
        }
      )
    );
    
    runtime.global().setProperty(runtime, "CalendarModule", moduleObj);
  }
};

// JavaScript usage - direct synchronous call
const { CalendarModule } = NativeModules;

// With TurboModules, this becomes synchronous
const eventId = CalendarModule.createEvent('Meeting');
console.log('Event created:', eventId);

// CalendarModule.ts — spec file
import { TurboModule, TurboModuleRegistry } from 'react-native';
import type { Double } from 'react-native/Libraries/Types/CodegenTypes';

export interface Spec extends TurboModule {
  createEvent(title: string, date: Double): string;
  updateEvent(id: string, title: string): boolean;
  deleteEvent(id: string): void;
}

export default TurboModuleRegistry.getEnforcing<Spec>('CalendarModule');

// ❌ Legacy - Creates many native views
function DeeplyNestedView() {
  return (
    <View style={styles.outer}>
      <View style={styles.middle}>
        <View style={styles.inner}>
          <Text>Hello</Text>
        </View>
      </View>
    </View>
  );
}

// ✅ Fabric - View flattening merges simple containers
function OptimizedNestedView() {
  return (
    <View style={[styles.outer, styles.middle, styles.inner]}>
      <Text>Hello</Text>
    </View>
  );
}

import { TouchableOpacity, Pressable } from 'react-native';

// Fabric gives press events higher priority than scroll events
<Pressable
  onPress={(event) => {
    // This event gets highest priority
    handlePress(event);
  }}
  onPressIn={() => {
    // Immediate visual feedback at max priority
    setPressed(true);
  }}
  style={({ pressed }) => [
    styles.button,
    pressed && styles.buttonPressed,
  ]}
/>

// metro.config.js
const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');

const config = {
  transformer: {
    // Enable tree-shaking
    minifierConfig: {
      compress: {
        drop_console: true, // Remove console.log in production
        drop_debugger: true,
        passes: 2,
      },
      mangle: {
        safari10: false,
      },
    },
  },
  resolver: {
    // Exclude unnecessary modules
    blockList: [/node_modules\/.*\/__tests__/],
    sourceExts: ['js', 'jsx', 'ts', 'tsx', 'mjs'],
  },
  // Parallel bundling for faster builds
  maxWorkers: 4,
};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

// ❌ Bad - Imports entire library
import { isNil, isEmpty, debounce } from 'lodash';

// ✅ Good - Imports only needed functions
import isNil from 'lodash/isNil';
import isEmpty from 'lodash/isEmpty';
import debounce from 'lodash/debounce';

# Analyze bundle composition
npx react-native bundle \
  --platform android \
  --dev false \
  --entry-file index.js \
  --bundle-output /tmp/bundle.js \
  --assets-dest /tmp/assets

# Visualize bundle modules
npx source-map-explorer /tmp/bundle.js

// expo-image (preferred for Expo)
import { Image } from 'expo-image';

<Image
  source="https://example.com/large-photo.jpg"
  style={{ width: 200, height: 200 }}
  contentFit="cover"
  cachePolicy="memory-disk"
  transition={300}
  placeholder={{ blurhash: 'LKO2?U%2Tw=w]~RBVZRi};RPxuwH' }}
/>

// expo-image provides:
// - Automatic WebP/AVIF conversion
// - Memory and disk caching
// - Blurhash placeholders
// - Smooth transitions
// - Reduced memory usage vs React Native Image

// react-native-fast-image (bare RN alternative)
import FastImage from 'react-native-fast-image';

<FastImage
  style={{ width: 200, height: 200 }}
  source={{
    uri: 'https://example.com/image.jpg',
    headers: { Authorization: 'Bearer token' },
    priority: FastImage.priority.normal,
    cache: FastImage.cacheControl.immutable,
  }}
  resizeMode={FastImage.resizeMode.cover}
/>

// Prefetch critical images
import { Image } from 'expo-image';

const criticalImages = [
  'https://example.com/hero.jpg',
  'https://example.com/logo.png',
];

useEffect(() => {
  Image.prefetch(criticalImages);
}, []);

// Responsive images based on screen size
function ResponsiveImage({ uri, width }: { uri: string; width: number }) {
  const screenWidth = Dimensions.get('window').width;
  const imageWidth = Math.min(width, screenWidth * 2); // 2x for retina

  return (
    <Image
      source={`${uri}?w=${imageWidth}&q=80`}
      style={{ width, height: width * 0.75 }}
      contentFit="cover"
    />
  );
}

// Thumbnail generation for lists
function ImageThumbnail({ uri }: { uri: string }) {
  return (
    <Image
      source={`${uri}?w=100&q=60`} // Low-res thumbnail
      style={{ width: 100, height: 100 }}
      contentFit="cover"
    />
  );
}

// Fully optimized FlatList
import { FlatList } from 'react-native';

const ITEM_HEIGHT = 120;
const LIST_PADDING = 16;

<FlatList
  data={items}
  renderItem={renderItem}
  
  // Performance optimizations
  keyExtractor={useCallback((item) => item.id, [])}
  getItemLayout={useCallback(
    (_, index) => ({
      length: ITEM_HEIGHT,
      offset: ITEM_HEIGHT * index,
      index,
    }),
    []
  )}
  
  // Rendering constraints
  removeClippedSubviews={true}
  initialNumToRender={10}
  maxToRenderPerBatch={10}
  windowSize={5}
  updateCellsBatchingPeriod={50}
  
  // Memory optimization
  maxToRenderPerBatch={10}
  windowSize={5}
  
  // Prevent jank on slow scroll
  disableScrollViewPanResponder={false}
  
  // Headers and footers
  ListHeaderComponent={useCallback(
    () => <ListHeader />,
    []
  )}
  ListFooterComponent={useCallback(
    () => <ListFooter />,
    []
  )}
  
  // Separator optimization
  ItemSeparatorComponent={useCallback(
    () => <View style={styles.separator} />,
    []
  )}
  
  // Empty state
  ListEmptyComponent={useCallback(
    () => <EmptyState />,
    []
  )}
  
  contentContainerStyle={styles.listContent}
/>

import { FlashList } from '@shopify/flash-list';

function LargeList({ items }) {
  return (
    <FlashList
      data={items}
      renderItem={({ item }) => <ListItem item={item} />}
      estimatedItemSize={120}
      estimatedListSize={{
        width: Dimensions.get('window').width,
        height: Dimensions.get('window').height,
      }}
      keyExtractor={(item) => item.id}
      overrideItemLayout={(layout, item) => {
        // Dynamic item sizing
        layout.size = item.isExpanded ? 200 : 80;
      }}
      // FlashList handles these automatically:
      // - removeClippedSubviews
      // - windowSize optimization
      // - Recycling pool management
    />
  );
}

import { memo } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';

// ✅ Memoize list items
interface ListItemProps {
  item: Item;
  onPress: (id: string) => void;
}

const ListItem = memo(function ListItem({ item, onPress }: ListItemProps) {
  return (
    <TouchableOpacity
      onPress={() => onPress(item.id)}
      style={styles.item}
    >
      <Text style={styles.title}>{item.title}</Text>
      <Text style={styles.subtitle}>{item.description}</Text>
    </TouchableOpacity>
  );
}, (prevProps, nextProps) => {
  // Custom comparison to avoid deep equality checks
  return (
    prevProps.item.id === nextProps.item.id &&
    prevProps.item.title === nextProps.item.title &&
    prevProps.item.updatedAt === nextProps.item.updatedAt
  );
});

import { useCallback, useMemo, useState } from 'react';

function ProductList({ products, filter }: ProductListProps) {
  const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('asc');

  // ✅ Stable callback - same reference unless dependencies change
  const handlePress = useCallback((productId: string) => {
    navigation.navigate('ProductDetail', { productId });
  }, [navigation]);

  // ✅ Memoized expensive computation
  const filteredAndSortedProducts = useMemo(() => {
    console.log('Computing filtered products...');
    
    let result = products;
    
    if (filter.category) {
      result = result.filter(p => p.category === filter.category);
    }
    
    if (filter.minPrice) {
      result = result.filter(p => p.price >= filter.minPrice);
    }
    
    return result.sort((a, b) =>
      sortOrder === 'asc'
        ? a.price - b.price
        : b.price - a.price
    );
  }, [products, filter.category, filter.minPrice, sortOrder]);

  // ✅ Memoized style object
  const containerStyle = useMemo(() => ({
    paddingHorizontal: 16,
    paddingTop: Platform.OS === 'ios' ? 44 : 0,
  }), []);

  return (
    <View style={containerStyle}>
      <FlatList
        data={filteredAndSortedProducts}
        renderItem={({ item }) => (
          <ListItem item={item} onPress={handlePress} />
        )}
        keyExtractor={useCallback((item) => item.id, [])}
      />
    </View>
  );
}

import { createContext, useContext, useMemo, useState, memo } from 'react';

// Split context into smaller pieces
const AuthContext = createContext<AuthContextType | null>(null);
const ThemeContext = createContext<ThemeContextType | null>(null);

function AppProvider({ children }: { children: React.ReactNode }) {
  const [authState, setAuthState] = useState<AuthState>(initialAuth);
  const [theme, setTheme] = useState<Theme>('light');

  const authValue = useMemo(
    () => ({ state: authState, setAuthState }),
    [authState]
  );

  const themeValue = useMemo(
    () => ({ theme, setTheme, toggleTheme }),
    [theme]
  );

  return (
    <AuthContext.Provider value={authValue}>
      <ThemeContext.Provider value={themeValue}>
        {children}
      </ThemeContext.Provider>
    </AuthContext.Provider>
  );
}

// ✅ Only re-renders when auth changes, not theme
const ProfileScreen = memo(function ProfileScreen() {
  const { state } = useContext(AuthContext)!;
  return <Text>{state.user?.name}</Text>;
});

import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withSpring,
  withTiming,
  interpolate,
  Extrapolate,
} from 'react-native-reanimated';

function AnimatedCard() {
  const scale = useSharedValue(1);
  const opacity = useSharedValue(0);
  const rotation = useSharedValue(0);

  // Layout animation
  useEffect(() => {
    opacity.value = withTiming(1, { duration: 300 });
    rotation.value = withSpring(0, { damping: 15 });
  }, []);

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [
      { scale: scale.value },
      { rotateZ: `${rotation.value}deg` },
    ],
    opacity: opacity.value,
  }));

  const onPressIn = () => {
    scale.value = withSpring(0.95, { damping: 20 });
  };

  const onPressOut = () => {
    scale.value = withSpring(1, { damping: 15 });
  };

  return (
    <Animated.View style={[styles.card, animatedStyle]}>
      <Animated.Image
        source={{ uri: 'https://example.com/image.jpg' }}
        sharedTransitionTag="shared-image"
        style={styles.image}
      />
    </Animated.View>
  );
}

import { GestureDetector, Gesture } from 'react-native-gesture-handler';
import Animated from 'react-native-reanimated';

function SwipeableRow({ children, onDelete }) {
  const translateX = useSharedValue(0);
  const isSwiped = useSharedValue(false);

  const panGesture = Gesture.Pan()
    .onUpdate((event) => {
      translateX.value = Math.max(-100, Math.min(0, event.translationX));
    })
    .onEnd(() => {
      if (translateX.value < -50) {
        translateX.value = withSpring(-100);
        isSwiped.value = true;
      } else {
        translateX.value = withSpring(0);
        isSwiped.value = false;
      }
    });

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ translateX: translateX.value }],
  }));

  return (
    <View>
      {/* Delete action behind the row */}
      <View style={styles.deleteContainer}>
        <TouchableOpacity onPress={onDelete}>
          <Text style={styles.deleteText}>Delete</Text>
        </TouchableOpacity>
      </View>
      <GestureDetector gesture={panGesture}>
        <Animated.View style={animatedStyle}>
          {children}
        </Animated.View>
      </GestureDetector>
    </View>
  );
}

# React Native Performance Monitor (Dev Menu)
# Shake device → Show Perf Monitor
# Displays: FPS, JS FPS, RAM usage

# Systrace for Android
npx react-native start --reset-cache
# Then in another terminal:
# Open dev menu → Profile Hermes → record system trace

# Instruments for iOS
# Xcode → Product → Profile → Time Profiler

import { PerformanceObserver, performance } from 'react-native-performance';

// Track custom metrics
const mark = performance.mark('list-render');
// ... render list ...
performance.measure('list-render-time', 'list-render');

// Observe performance entries
const observer = new PerformanceObserver((list, obs) => {
  const entries = list.getEntries();
  entries.forEach(entry => {
    if (entry.duration > 16) { // Over 1 frame at 60fps
      console.warn('Slow operation:', entry.name, entry.duration);
    }
  });
});

observer.observe({ entryTypes: ['measure'] });

import { InteractionManager } from 'react-native';

// Measure time to interactive
function useTTIMeasurement(screenName: string) {
  const startTime = useRef(performance.now());

  useEffect(() => {
    InteractionManager.runAfterInteractions(() => {
      const tti = performance.now() - startTime.current;
      analytics.track('TTI', {
        screen: screenName,
        duration: tti,
      });

      if (tti > 2000) {
        console.warn(`Slow TTI for ${screenName}: ${tti}ms`);
      }
    });
  }, []);
}

// Frame rate monitoring
function useFrameRateMonitor() {
  const frameDurations = useRef<number[]>([]);
  const lastFrame = useRef(performance.now());

  useEffect(() => {
    const interval = setInterval(() => {
      const now = performance.now();
      const delta = now - lastFrame.current;
      frameDurations.current.push(delta);
      lastFrame.current = now;

      // Keep last 60 samples
      if (frameDurations.current.length > 60) {
        const avg = frameDurations.current.reduce((a, b) => a + b) / 60;
        const fps = 1000 / avg;
        
        if (fps < 30) {
          console.warn('Low frame rate:', fps.toFixed(1), 'FPS');
        }
        
        frameDurations.current = [];
      }
    }, 1000);

    return () => clearInterval(interval);
  }, []);
}

import { lazy, Suspense, ComponentType } from 'react';
import { ActivityIndicator, View, Text } from 'react-native';

// Define lazy-loaded screens
const ProfileScreen = lazy(() => import('./screens/ProfileScreen'));
const SettingsScreen = lazy(() => import('./screens/SettingsScreen'));
const DashboardScreen = lazy(() => import('./screens/DashboardScreen'));

const LAZY_SCREENS = {
  Profile: ProfileScreen,
  Settings: SettingsScreen,
  Dashboard: DashboardScreen,
};

function LazyScreen({ route }: { route: { name: keyof typeof LAZY_SCREENS } }) {
  const Screen = LAZY_SCREENS[route.name] as ComponentType<any>;

  return (
    <Suspense fallback={<ScreenFallback />}>
      <Screen />
    </Suspense>
  );
}

function ScreenFallback() {
  return (
    <View style={styles.centered}>
      <ActivityIndicator size="large" color="#007AFF" />
      <Text style={styles.loadingText}>Loading...</Text>
    </View>
  );
}

// metro.config.js - Configure code splitting
const config = {
  transformer: {
    // Enable inline requires for lazy imports
    inlineRequires: {
      blockList: {
        // Don't inline requires for these modules
        'react-native': true,
        'react': true,
      },
    },
    // Enable the new inline requires transform
    experimentalImportSupport: true,
  },
};