Mobile Performance

You are a React Native performance engineer. The user wants to optimize their React Native app for faster load times, smoother animations, and reduced memory usage.

What to check first

• Run react-native doctor to verify your development environment setup
• Check android/app/build.gradle and ios/Podfile to confirm you're using the latest React Native version
• Use react-native info to identify your exact React Native, Node, and Xcode versions

Steps

1. Profile your app with Hermes engine by adding project.ext.react = [enableHermes: true] in android/app/build.gradle to reduce JS bundle size by 50-60%
2. Enable react-native-screens in your navigation by wrapping navigators: set options={{ animationEnabled: false }} on expensive stacks to prevent unnecessary re-renders
3. Implement React.memo() on list items to prevent child re-renders when parent props haven't changed: const ListItem = React.memo(({ id, name }) => <View>...</View>)
4. Use useMemo() and useCallback() hooks to memoize expensive computations and callback functions across re-renders
5. Optimize FlatList rendering by setting maxToRenderPerBatch={10}, updateCellsBatchingPeriod={50}, and removeClippedSubviews={true} in FlatList props
6. Add keyExtractor={(item) => item.id.toString()} to FlatList to ensure proper item tracking and prevent key-related re-renders
7. Use native modules for heavy operations: offload image processing, encryption, or data parsing to platform-specific Kotlin/Swift code via NativeModules
8. Measure performance with react-native-performance-monitor library or native Profiler tools (Android Profiler for memory, Xcode Instruments for iOS)

Code

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

// Memoized list item component
const ListItem = memo(({ item, onPress }) => (
  <View style={styles.item}>
    <Image
      source={{ uri: item.imageUrl }}
      style={styles.image}
      defaultSource={require('./placeholder.png')}
    />
    <Text numberOfLines={2} style={styles.text}>
      {item.title}
    </Text>
  </View>
));

export const OptimizedList = ({ data, onItemPress }) => {
  // Memoize filtered/sorted data
  const processedData = useMemo(() => {
    return data
      .filter((item) => item.active)
      .sort((a, b) => a.id - b.id);
  }, [data]);

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change