React Native apps should run at 60 fps (or 120 fps on ProMotion displays). These techniques help you stay smooth.

Avoid Unnecessary Re-renders

Use React.memo for components that receive the same props frequently:

  const ListItem = React.memo(function ListItem({ title, onPress }) {
    return (
        <Pressable onPress={onPress}>
            <Text>{title}</Text>
        </Pressable>
    );
});

Memoize expensive computations:

  const sortedItems = useMemo(() => items.sort((a, b) => a.name.localeCompare(b.name)), [items]);

Stabilize callbacks passed to children:

  const handlePress = useCallback(() => {
    navigation.navigate('Details', { id });
}, [navigation, id]);

FlatList Optimization 

  <FlatList
    data={data}
    renderItem={renderItem}
    keyExtractor={(item) => item.id}
    getItemLayout={(_, index) => ({
        length: ITEM_HEIGHT,
        offset: ITEM_HEIGHT * index,
        index,
    })}
    maxToRenderPerBatch={10}
    windowSize={5}
    removeClippedSubviews={true}
/>
  • getItemLayout skips measurement for fixed-height items
  • removeClippedSubviews unmounts off-screen views (Android)

Image Optimization 

  import { Image } from 'expo-image';

// expo-image caches and loads faster than RN Image
<Image
    source={{ uri: photoUrl }}
    style={{ width: 200, height: 200 }}
    contentFit="cover"
    transition={200}
/>

Tips:

  • Serve appropriately sized images from your API
  • Use WebP format when possible
  • Prefetch critical images: Image.prefetch(url)

Avoid Inline Styles and Functions 

  // Bad — new object/function every render
<Pressable style={{ padding: 16 }} onPress={() => doSomething(id)}>

// Good — stable references
<Pressable style={styles.button} onPress={handlePress}>

Hermes Engine

Expo enables Hermes by default — a JavaScript engine optimized for mobile with faster startup and lower memory usage. Verify in app.json:

  { "expo": { "jsEngine": "hermes" } }

Profiling Tools

React DevTools — Inspect component re-renders:

  npx react-devtools

Flipper — Network, layout, and performance inspection.

Performance Monitor — Enable in dev menu (shake device → “Show Perf Monitor”) to see JS and UI thread FPS.

Next: build and publish your app to the App Store and Google Play.