React Native is amazing for building cross-platform apps quickly, but let's be honest — sometimes, things can get… 🐌 slow. If your app is laggy, animations are choppy, or load times feel like waiting for Windows XP to boot, it's time to optimize.

In this article, we'll cover 12 proven tips to make your React Native app faster, smoother, and more battery-friendly.

1️⃣ Use FlatList Instead of ScrollView for Large Lists

ScrollView renders everything at once, which can kill performance. FlatList renders items lazily as they appear on screen.

<FlatList
  data={myData}
  renderItem={({ item }) => <Text>{item.title}</Text>}
  keyExtractor={(item) => item.id}
/>

💡 Use getItemLayout for even faster scrolling.

2️⃣ Avoid Anonymous Functions in Render

Every re-render creates a new function in memory. ❌ Bad:

<Button onPress={() => handleClick()} />

✅ Good:

const handlePress = useCallback(() => handleClick(), []);
<Button onPress={handlePress} />

3️⃣ Optimize Images

  • Use WebP format for smaller file size.
  • Preload with Image.prefetch().
  • Use responsive image sizes — don't ship a 4K image to a mobile screen.

4️⃣ Memoize Components

Avoid unnecessary re-renders with React.memo or useMemo.

const MyComponent = React.memo(({ name }) => <Text>{name}</Text>);

5️⃣ Reduce Re-renders with useCallback & useMemo

Expensive computations? Wrap them in useMemo. Functions in child components? Use useCallback.

6️⃣ Use Hermes Engine 🏎

Hermes is a JavaScript engine optimized for React Native. Add this in android/app/build.gradle:

enableHermes: true

Benefits: Faster startup, less memory usage.

7️⃣ Lazy Load Screens with React.lazy

Load heavy screens only when needed.

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

8️⃣ Minimize State in Context API

Too much state in Context will re-render your whole app. Solution:

  • Use React Query for server state.
  • Use Redux Toolkit for structured state management.

9️⃣ Optimize Animations with react-native-reanimated

None

Animations in JS thread can lag — react-native-reanimated moves them to the UI thread for smoother performance.

🔟 Avoid Overdraw

Too many overlapping views can slow down rendering. 💡 Keep your UI hierarchy clean and minimal.

1️⃣1️⃣ Use Native Modules for Heavy Tasks

Offload CPU-intensive tasks to native code (Java/Kotlin/Swift) when possible.

1️⃣2️⃣ Monitor Performance with Flipper

Flipper helps track performance issues, memory leaks, and network requests in real-time.

🏆 Final Takeaway

Performance optimization in React Native is about reducing unnecessary work for the JS thread and offloading tasks to the native side whenever possible.

If your app feels slow:

  • Profile it 🔍.
  • Identify bottlenecks.
  • Apply targeted fixes instead of random tweaks.

💡 Pro Tip: Optimize early for a smooth UX, because users will uninstall laggy apps faster than they uninstall Candy Crush.