React Native Performance Optimization Guide

Building fast, responsive React Native apps requires understanding performance bottlenecks and optimization techniques.

Render Optimization

Minimize Re-renders

Use React.memo and useMemo strategically:

const ExpensiveComponent = React.memo(({ data }) => {
  const processedData = useMemo(
    () => heavyProcessing(data),
    [data]
  );
  
  return <View>{/* render processed data */}</View>;
});

FlatList Optimization

Critical props for performance:

<FlatList
  data={items}
  renderItem={renderItem}
  keyExtractor={(item) => item.id}
  // Performance props
  removeClippedSubviews={true}
  maxToRenderPerBatch={10}
  updateCellsBatchingPeriod={50}
  initialNumToRender={10}
  windowSize={5}
  getItemLayout={(data, index) => ({
    length: ITEM_HEIGHT,
    offset: ITEM_HEIGHT * index,
    index,
  })}
/>

Image Optimization

Fast Image Library

import FastImage from 'react-native-fast-image';

<FastImage
  source={{
    uri: imageUrl,
    priority: FastImage.priority.high,
  }}
  resizeMode={FastImage.resizeMode.cover}
/>

Image Caching

• Implement proper caching strategies
• Use appropriate image formats (WebP)
• Lazy load images
• Implement progressive loading

Navigation Performance

React Navigation Optimization

const Stack = createStackNavigator();

function App() {
  return (
    <Stack.Navigator
      screenOptions={{
        // Optimize transitions
        cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
        // Enable gesture handler
        gestureEnabled: true,
        gestureDirection: 'horizontal',
      }}
    >
      <Stack.Screen name="Home" component={HomeScreen} />
    </Stack.Navigator>
  );
}

State Management

Efficient Global State

Use context wisely to avoid unnecessary re-renders:

// Split contexts by update frequency
const UserContext = createContext();
const ThemeContext = createContext();
const DataContext = createContext();

Consider Zustand or Jotai

For better performance than Context API:

import create from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

Native Modules

When to Use Native Code

Bridge to native for:

• Heavy computations
• Native API access
• Performance-critical operations
• Platform-specific features

Turbo Modules

New architecture for faster native communication:

• Synchronous native calls
• Type-safe interfaces
• Lazy loading
• Better performance

Animation Performance

Use Reanimated 2

For 60 FPS animations:

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

function AnimatedComponent() {
  const offset = useSharedValue(0);
  
  const animatedStyles = useAnimatedStyle(() => ({
    transform: [{ translateX: offset.value }],
  }));
  
  return (
    <Animated.View style={animatedStyles}>
      {/* content */}
    </Animated.View>
  );
}

Profiling and Debugging

Tools

• React DevTools Profiler
• Flipper for debugging
• Reactotron for state inspection
• Performance Monitor

Key Metrics

Monitor:

• JavaScript thread usage
• UI thread usage
• Bridge communication
• Memory usage
• Frame drops

Build Optimization

Hermes Engine

Enable for better performance:

{
  "android": {
    "enableHermes": true
  }
}

Benefits:

• Faster app startup
• Reduced memory usage
• Smaller bundle size

Code Splitting

Dynamic imports for lazy loading:

const HeavyComponent = React.lazy(
  () => import('./HeavyComponent')
);

Best Practices

1. Profile Before Optimizing: Measure to find real bottlenecks
2. Optimize Images: Use appropriate sizes and formats
3. Minimize Bridge Communication: Batch operations when possible
4. Use PureComponent/React.memo: Prevent unnecessary renders
5. Implement Proper List Virtualization: Use FlatList correctly
6. Leverage Native Modules: For heavy operations
7. Monitor Performance: Continuously track metrics

Common Pitfalls

• Over-optimization before profiling
• Ignoring memory leaks
• Not using proper list components
• Excessive bridge communication
• Synchronous storage operations
• Large bundle sizes

Conclusion

React Native performance optimization is an ongoing process. Profile regularly, optimize strategically, and always measure the impact of your changes.