Optimizing React Native Performance

As the complexity of apps increases, so too will opportunities for problems due to degraded app performance, as users have to wait for the app to load completely. Users generally tend to lose interest in the use of an app that takes too long to load.

Let’s find out how you can make your react native app’s performance better.

Why React Native Performance Matters

A slow app leads to:

• Poor user experience
• Higher uninstall rates
• Negative app store reviews

Performance issues usually come from:

• Unnecessary re-renders
• Heavy JS thread work
• Unoptimized lists and images
• Poor state management

Best Practices to Optimize React Native Performance

1) Avoid Unnecessary Re-renders:

Problem: Every state change causes components to re-render—even when the UI doesn’t change.

Bad Example

const ProductCard = ({ item }) => {
  console.log("Rendered");
  return <Text>{item.title}</Text>;
};

Solution: Use React.memo

const ProductCard = React.memo(({ item }) => {
  return <Text>{item.title}</Text>;
});

2) Optimize Event Handlers with useCallback

Problem: Inline functions create a new reference on every render.

Bad Example

<TouchableOpacity onPress={() => addToCart(item.id)}>

Optimized Example

const handleAddToCart = useCallback(() => {
  addToCart(item.id);
}, [item.id]);
<TouchableOpacity onPress={handleAddToCart}>

This prevents unnecessary child re-renders.

3) Avoid Heavy Computation Inside JSX

Bad Practice

<Text>{items.reduce((a, b) => a + b.price, 0)}</Text>

Optimized with useMemo

const totalPrice = useMemo(() => {
  return items.reduce((a, b) => a + b.price, 0);
}, [items]);
<Text>{totalPrice}</Text>

Heavy logic runs only when dependencies change.

4) FlatList Optimization (Very Important)

Common Mistake

Using ScrollView for large lists:

<ScrollView>
  {products.map(p => <ProductCard item={p} />)}
</ScrollView>

Correct Approach: FlatList

<FlatList
  data={products}
  keyExtractor={(item) => item.id.toString()}
  renderItem={renderItem}
  initialNumToRender={10}
  maxToRenderPerBatch={10}
  windowSize={5}
  removeClippedSubviews
/>

Memoize renderItem

const renderItem = useCallback(({ item }) => (
  <ProductCard item={item} />
), []);

Result: Smooth scrolling even with 1000+ items

5) Image Optimization (Huge Performance Gain) Issues with Default <Image />

• No aggressive caching
• Images reload on scroll
• Memory overhead

Use react-native-fast-image

import FastImage from 'react-native-fast-image';
<FastImage
  style={{ width: 100, height: 100 }}
  source={{ uri: imageUrl }}
  resizeMode={FastImage.resizeMode.cover}
/>

• Better caching
• Faster rendering
• Ideal for product lists

6) Avoid Inline Styles

 Bad Practice

<View style={{ padding: 10, backgroundColor: '#fff' }}> 

Optimized StyleSheet:

const styles = StyleSheet.create({
  container: {
    padding: 10,
    backgroundColor: '#fff',
  },
});
<View style={styles.container}>

Inline styles = new object every render = re-render

7) Reduce JS Thread Load

Problem: Too much JS work blocks UI updates.

Use InteractionManager

useEffect(() => {
  InteractionManager.runAfterInteractions(() => {
    fetchHeavyData();
  });
}, []);

Defers heavy work until animations & gestures finish.

8) Optimize Navigation Performance

Lazy Load Screens

<Tab.Navigator screenOptions={{ lazy: true }} />

Unmount Screens on Blur

options={{ unmountOnBlur: true }}

• Reduces memory usage
• Faster navigation

9) Improve Animation Performance

JS-based Animations

Cause frame drops on low-end devices.

Use Native Driver

Animated.timing(value, {
  toValue: 1,
  duration: 300,
  useNativeDriver: true,
}).start();

Native animations run outside JS thread.

10) Optimize API Calls

Sequential API Calls

await fetchA();
await fetchB();

Parallel Calls

await Promise.all([
  fetchA(),
  fetchB(),
]);

• Faster loading
• Better UX

11) Reduce App Startup Time

Heavy logic in App.js

Best Practice

• Load critical UI first
• Delay APIs
• Use splash screen wisely

useEffect(() => {
  setTimeout(loadData, 0);
}, []);

12) Enable Hermes Engine

Why Hermes?

• Faster startup
• Lower memory usage
• Better JS execution

// android/app/build.gradle

enableHermes: true

Conclusion

App performance optimization in React Native needs to be treated like a never-ending cycle of continuous improvement and not just a one-time effort. If you follow best practices to optimize your React Native app, such as reducing unnecessary re-renders, optimizing your lists and images, minimizing how many calls you make to the bridge on the native side, and using performance profiling tools, then you will create user-friendly, fast, scalable mobile apps.

By optimizing a React Native application, you not only improve users’ experience but also improve your app store ratings and ultimately assist in the long-term success of your application.

FAQ

1. What is the biggest cause of performance issues in React Native?

The most common causes are unnecessary re-renders, heavy computations on the JavaScript thread, unoptimized lists, and frequent JavaScript-to-native bridge calls.

2. How can I reduce re-rendering in React Native?

By using React.memo, PureComponent, useCallback, useMemo, and by effectively managing your application’s state, all of these methods will help to reduce the number of times your app renders multiple times in React Native.

3. Is React Native slower than native apps?

When properly optimized, React Native applications can perform nearly as fast as native applications. Most React Native performance issues stem from the poor coding practices of developers rather than the limitations of the React Native framework.

4. Should I use FlatList or ScrollView for large lists?

FlatList and SectionList are preferable for large quantities of data. When using ScrollView, the entire dataset is rendered all at once, which can lead to performance and memory problems within your application.

5. What is the Hermes engine, and should I use it?

Hermes is an engine that has been configured to work well with React Native and has been set up to deliver a faster time to first display and a more efficient use of memory than JavaScript engines and Go. As a result of these features, Hermes is an ideal option to utilize for an application that will ultimately be deployed to production.

6. How do images affect React Native performance?

Large or uncompressed images increase memory usage and slow down rendering. Optimizing image size, format, and loading behavior significantly improves performance.