5 Things I Learned Optimizing a React Native App

Practical lessons from profiling and speeding up a production React Native app — from list rendering to avoiding unnecessary re-renders.

By Dewan Tanjil Hossain · 2026-09-28

Performance problems in React Native rarely come from one big mistake. Usually it's a handful of small things that add up. Here are five that made the biggest difference for me.

1. Use FlatList properly

Rendering long lists with map() inside a ScrollView renders every item up front. FlatList virtualizes — but only if you give it what it needs:

keyExtractor with stable keys
getItemLayout when rows have a fixed height
Memoized renderItem components

const Row = React.memo(({ item }: { item: Item }) => (
  <Text>{item.title}</Text>
));

<FlatList
  data={items}
  keyExtractor={(item) => item.id}
  renderItem={({ item }) => <Row item={item} />}
  getItemLayout={(_, index) => ({ length: 56, offset: 56 * index, index })}
/>

2. Measure before you optimize

Guessing is expensive. The React DevTools profiler and Flipper show exactly which components re-render and why.

Premature optimization is the root of all evil — but measured optimization is just engineering.

3. Move work off the JS thread

Animations driven from JavaScript stutter when the JS thread is busy. Reanimated worklets run on the UI thread and stay smooth.

4. Keep images in check

Serve images at the size they're displayed, and cache them. A 4000px photo in a 100px avatar is wasted memory.

5. Watch your bundle

Unused dependencies slow startup. Tools like react-native-bundle-visualizer make the heavy parts obvious.