React Native Performance Optimization: Fast and Smooth Apps

// app.json
{
  "expo": {
    "jsEngine": "hermes"
  }
}

// Check Hermes is enabled
import { HermesEngine } from 'react-native';

console.log(HermesEngine.isEnabled()); // true

// ❌ Bad - No optimization
<FlatList
  data={items}
  renderItem={({ item }) => <ItemComponent item={item} />}
/>

// ✅ Good - Optimized
<FlatList
  data={items}
  renderItem={({ item }) => <ItemComponent item={item} />}
  keyExtractor={item => item.id}
  getItemLayout={(_, index) => ({
    length: ITEM_HEIGHT,
    offset: ITEM_HEIGHT * index,
    index,
  })}
  removeClippedSubviews={true}
  maxToRenderPerBatch={10}
  windowSize={10}
  initialNumToRender={10}
  ListHeaderComponent={Header}
  ListFooterComponent={Footer}
/>

// Use FlashList for even better performance
import { FlashList } from '@shopify/flash-list';

<FlashList
  data={items}
  renderItem={({ item }) => <ItemComponent item={item} />}
  estimatedItemSize={100}
/>

// Prevent unnecessary re-renders
import { memo, useCallback, useMemo } from 'react';

// Memoize components
const Item = memo(({ title, onPress }) => (
  <TouchableOpacity onPress={onPress}>
    <Text>{title}</Text>
  </TouchableOpacity>
));

// Memoize callbacks
const handlePress = useCallback((id: string) => {
  navigation.navigate('Detail', { id });
}, [navigation]);

// Memoize expensive computations
const processedData = useMemo(() => {
  return data.map(item => transform(item));
}, [data]);

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

// Use FastImage for caching
<FastImage
  source={{ uri: 'https://example.com/image.jpg' }}
  style={{ width: 100, height: 100 }}
  resizeMode={FastImage.resizeMode.cover}
/>

// Or use expo-image
import { Image } from 'expo-image';

<Image
  source="https://example.com/image.jpg"
  style={{ width: 100, height: 100 }}
  contentFit="cover"
  cachePolicy="memory-disk"
/>

import { PerformanceMonitor } from 'expo-performance';

// Measure execution time
const { start, end } = await PerformanceMonitor.startMeasure('my-task');
await doExpensiveTask();
end();

// Check frame rate
import { useFrameRate } from 'expo-performance';

function MyComponent() {
  const frameRate = useFrameRate();
  return <Text>FPS: {frameRate}</Text>;
}