The Performance Problem
React Native gives you cross-platform power, but it comes with real performance pitfalls. After 3+ years in production apps, here are the techniques I rely on.
1. FlatList Over ScrollView
Always use `FlatList` for lists, never `ScrollView`. FlatList virtualizes the list — only rendering what's visible:
<FlatList
data={items}
keyExtractor={(item) => item.id}
renderItem={({ item }) => <ItemCard item={item} />}
windowSize={10}
maxToRenderPerBatch={5}
removeClippedSubviews
/>
2. Memoization
Wrap expensive components with `React.memo`, and use `useCallback` for handlers:
const ItemCard = React.memo(({ item }: { item: Item }) => {
return <View>...</View>;
});
const handlePress = useCallback((id: string) => {
// handler
}, []);
3. Hermes Engine
Enable Hermes in your `android/app/build.gradle`:
enableHermes: true
Monitoring
Use Flashlight (open-source) to measure real-device FPS and CPU usage — it's invaluable.