Mastering React Native Apps: useMemo, useCallback, and FlashList

In the world of React Native application development, it has become necessary to make your apps faster, more reliable, and deliver a smoother user experience. In this world where performance is king, users expect fast experiences, so as React Native developers we have to deliver.

However, achieving this is a challenging task, especially when you have to deal with complex state management and re-renders throughout the React Native application. This is where hooks like useMemo, and useCallback, and components like Flashlist come into play.

In this article we will try to understand and learn to apply practical strategies for enhancing React Native application performance using these tools and also explore how these tools help us to prevent unnecessary re-renders, so let’s dive in.

Memoization

When we say useMemo means we are doing ‘Memoization in React Native or React in general’, we are using this technique to optimize the performance of our application’s components. The main purpose of this technique is to avoid unnecessary re-renders which slows down the performance.

When we are moving forward we need to understand why we need Memoization in React Native in the first place. For understanding, these are the 3 main reasons have a look:

• Improve Performance: By preventing unnecessary re-renders, your app runs smoother and faster.
• Efficient Resource Usage: Reduces CPU usage and memory consumption by avoiding repetitive calculations of how many times it should be rendered.
• Enhanced User Experience: Faster and more responsive user interface in React Native apps.

Now, the next question in the minds of Developers will be when should we useMemo?

• Components Have Expensive Calculations: If your component does a lot of processing or calculations.
• Frequent Re-Renders: When a component re-renders often but its output doesn’t change frequently.
• Pure Components: Components that render the same output for the same props can benefit the most.

Now, we will see how to use it:

Firstly, make a screen where you make the React Native component that you want to render.

1. Import React from ‘react’:

import React from 'react';

import React from 'react';
import {FlatList, SafeAreaView} from 'react-native';
import ListItem from '../../components/ListItem';


const UseMemoDemoScreen: React.FC = () => {
 const items = [
   {id: 1, name: 'Test '},
   {id: 2, name: 'Test '},
   {id: 3, name: 'Test '},
   {id: 4, name: 'Test '},
   {id: 5, name: 'Test '},
   {id: 6, name: 'Test '},
   {id: 7, name: 'Test '},
 ];


 return (
   <SafeAreaView>
     <FlatList
       data={items}
       renderItem={({item}) => <ListItem item={item} />}
       keyExtractor={item => item.id.toString()}
     />
   </SafeAreaView>
  );
};
export default UseMemoDemoScreen;

import React from 'react';
import {StyleSheet, Text, View} from 'react-native';
import Colors from '../theme/Colors';

const ListItem = React.memo(({item}) => {
 console.log('Rendering ListItem:', item.name); // This will show 
you how often the component re-renders
 return (
   <View>
     <Text style={styles.textColor}>{item.name}</Text>
   </View>
 );
});

const styles = StyleSheet.create({
 textColor: {
   color: Colors.black,
 },
});
export default ListItem;

import React from 'react';
import {StyleSheet, Text, View} from 'react-native';
import Colors from '../theme/Colors';


const ListItem = ({item}) => {
 console.log('Rendering ListItem:', item.name); // This will show you how 
often the component re-renders
 return (
  <View>
    <Text style={styles.textColor}>{item.name}</Text>
  </View>
 );
};


const styles = StyleSheet.create({
 textColor: {
   color: Colors.black,
 },
});

export default React.memo(ListItem);

import React, {useMemo} from 'react';
import {StyleSheet, Text, View} from 'react-native';
import Colors from '../theme/Colors';

const ListItemComponent = ({item}) => {
 console.log('Rendering ListItem:', item.name);
 return (
  <View>
    <Text style={styles.textColor}>{item.name}</Text>
  </View>
 );
};

const ListItem = useMemo(() => {
 return React.memo(ListItemComponent, (prevProps, nextProps) => {
  return prevProps.item.name === nextProps.item.name;
 });
}, []);

const styles = StyleSheet.create({
 textColor: {
   color: Colors.black,
 },
});
export default ListItem;

import React, {useCallback, useState} from 'react';
import {SafeAreaView, StyleSheet, TouchableOpacity, Text} from 'react-native';
import Colors from '../../theme/Colors';


const UseCallbackDemoScreen: React.FC = () => {
 const [count, setCount] = useState(0);

 const handleClick = useCallback(() => {
   setCount(count => count + 1);
   console.log('Button clicked!', count);
 }, [count]);
 

return (
  <SafeAreaView>
   <TouchableOpacity
     style={styles.button}
     onPress={() => {
      handleClick();
     }}>
     <Text style={styles.buttonColor}>useCallback Demo</Text>
   </TouchableOpacity>
  </SafeAreaView>
 );
};

export default UseCallbackDemoScreen;

const styles = StyleSheet.create({
  button: {
    paddingHorizontal: 20,
    paddingVertical: 10,
    borderWidth: 1,
    borderRadius: 25,
    margin: 20,
},
buttonColor: {
color: Colors.black,
},
});

import React, {useCallback, useState} from 'react';
import {
 SafeAreaView,
 StyleSheet,
 TouchableOpacity,
 Text,
 FlatList,
 View,
} from 'react-native';
import Colors from '../../theme/Colors';

const UseCallbackDemoScreen: React.FC = () => {
 const [count, setCount] = useState(0);

 const handleClick = useCallback(() => {
  setCount(count => count + 1);
  console.log('Button clicked!', count);
 }, [count]);

const renderItem = useCallback(({item, index}) => {
  return (
   <View key={index}>
     <Text>{item}</Text>
   </View>
  );
 }, []);

return (
  <SafeAreaView>
    <TouchableOpacity
      style={styles.button}
      onPress={() => {
       handleClick();
      }}>
      <Text style={styles.buttonColor}>useCallback Demo</Text>
    </TouchableOpacity>


    <FlatList
      viewabilityConfig={{
        waitForInteraction: false,
        viewAreaCoveragePercentThreshold: 70,
      }}
      data={count}
      renderItem={renderItem}
      numColumns={1}
      horizontal={false}
      keyExtractor={item => item.media_id}
      contentContainerStyle={{
        padding: 20,
        paddingTop: 42,
      }}
    />
  </SafeAreaView>
 );
};

export default UseCallbackDemoScreen;

const styles = StyleSheet.create({
 button: {
   paddingHorizontal: 20,
   paddingVertical: 10,
   borderWidth: 1,
   borderRadius: 25,
   margin: 20,
 },
 buttonColor: {
   color: Colors.black,
 },
});

const handleAddToCart = useCallback(() => {
  setCart((prevCart) => [...prevCart, item]);
}, [item]);

FlashList

If you know FlatList then don’t worry you also know FlashList. FlashList is just another and better alternative to FlatList.

FlashList is 5x faster than Flatlist in FPS* in UI Thread and 10x faster than Flatlist in FPS* in JS Thread.

It is very efficient in the following:

• Memory efficient scrolling.
• Snappy on all platforms.
• Extra configuration for even better performance.
• Buttery smooth complex layouts.

Our sole aim is to make apps faster, and for that performance becomes necessary.

FlatList and FlashList are both components used in React Native for rendering lists.

However, they have some key differences in terms of performance, features, and use cases. Here’s a detailed comparison:

Performance

FlatList:

• Rendering Performance: FlatList uses lazy loading, meaning it only renders the items that are currently visible on the screen. This reduces the initial rendering time and improves performance for large lists.
• Efficiency: While FlatList is efficient for most use cases, its performance can degrade when handling extremely large lists or complex item layouts.
• Memory Usage: FlatList manages memory usage effectively by reusing views that go off-screen, but it can still consume a significant amount of memory if not optimized properly.

FlatList:

• Rendering Performance: FlashList is optimized for rendering extremely large lists quickly and efficiently. It leverages advanced rendering techniques to improve performance significantly.
• Efficiency: FlashList is designed to handle complex layouts and large datasets with minimal performance degradation. It is more efficient than FlatList in scenarios involving extensive data.
• Memory Usage: FlashList is more aggressive in its memory management, reducing the overall memory footprint even for large datasets.

Use Cases

FlatList:

• General Use: Ideal for general-purpose list rendering where performance is not a critical concern.
• Small to Medium Lists: Suitable for small to medium-sized lists where the data size and complexity are manageable.
• Simple Layouts: Works well with simpler item layouts and straightforward list structures.

FlashList:

• Performance-Critical Applications: Best for applications where performance is crucial, especially with large datasets.
• Large Lists: Excels in handling very large lists with complex item layouts without sacrificing performance.
• Advanced Layouts: Ideal for use cases requiring advanced item layouts and interactions.

Now, let’s see how to use FlashList in our Applications:

Step 1: Install packages and Dependencies.

yarn add @shopify/flash-list
cd ios && pod install

Or

npm i @shopify/flash-list

Step 2:

import {FlashList} from '@shopify/flash-list';
import React from 'react';
import {View, Text, StyleSheet, SafeAreaView} from 'react-native';


const data = [
 {id: '1', title: 'Item 1'},
 {id: '2', title: 'Item 2'},
 {id: '3', title: 'Item 3'},
];


const FlashListScreen: React.FC = () => {
 const renderItem = ({item}) => (
  <View style={styles.item}>
   <Text style={styles.title}>{item.title}</Text>
  </View>
 );


return (
 <SafeAreaView style={styles.container}>
 <FlashList
    data={data}
    renderItem={renderItem}
    keyExtractor={item => item.id}
    estimatedItemSize={50}
  />
 </SafeAreaView>
);
};


export default FlashListScreen;


const styles = StyleSheet.create({
 container: {
  flex: 1,
  marginTop: 20,
 },
 item: {
   backgroundColor: '#f9c2ff',
   padding: 20,
   marginVertical: 8,
   marginHorizontal: 16,
},
title: {
   fontSize: 32,
 },
});