
React Native is a powerful framework for building mobile apps. However an app grows with lots of features and modules, it can become slow and often user faces certain performance issues. Especially in real-time communication apps like Chat and Feed, there is always a challenge to provide a smooth experience to the users.
Here in this blog, I'll explain how can we use the react hooks to optimize the performance of a list in React Native application.
Let's first understand a bit more about these useful hooks
useCallback
useCallback is a react hook that returns a memorized callback
When a component re-renders, all of its child components also re-render and if there are some complex logic and calculations then that can cause certain performance issues.
But somehow if we can manage to memorize a method that performs some complex calculation and that only perform calculations if any of the required dependency gets changed then It can be a boost in overall app performance
Usage
import React, { useState, useCallback } from 'react';
import { Button, Text, View } from "react-native";
const Counter = () => {
const [counterValue, setCounterValue] = useState(0);
const onPressHandler = useCallback(() => {
setCounterValue(counterValue + 1);
}, [counterValue]);
return (
<View>
<Text>{`Counter Value: ${counterValue}`}</Text>
<Button onPress={onPressHandler} title={'Update Counter'}/>
</View>
)
};
useMemo
useMemo is a react hook that returns a memorized value
useMemo memorizes a value or result of any calculation, It only recalculates when its dependency gets changed
Usage
import React, { useMemo } from 'react';
import { Text, View } from "react-native";
const Multiplier = ({ data }) => {
const result = useMemo(() => {
return data?.map(value => value * 20000);
}, [data]);
return (
<View>
<Text>{`Result: ${result}`}</Text>
</View>
)
};
One of the common features in any application is a listing and what if that listing of data rendering causes certain performance issues? When we have a large list of items then it becomes important to manage the list of items effectively so that it won't create any performance issues in an application
Let's use useMemo and useCallback hooks to optimize the rendering of a list
Usage
import React, { useMemo, useCallback } from 'react';
import { FlatList, Text, View } from "react-native";
const PostList = ({ data = [] }) => {
const renderPostItem = useCallback(({ item }) => {
return (
<View>
<Text>{item?.title}</Text>
<Text>{item?.description}</Text>
</View>
);
}, []);
const filteredData = useMemo(() => {
return data?.filter(item => item?.action !== 'deleted' )
}, [data]);
return (
<FlatList
data={filteredData}
renderItem={renderPostItem}
keyExtractor={item => item?.id?.toString()}
/>
)
};
Here we have a list that renders posts and to optimize list rendering we're using useCallback to memorize the renderItem function of FlatList so that it doesn't get created again on every render and also using useMemo to memorize the filtered data so that it only updates when the actual data array gets changed
Conclusion
Optimizing performance is crucial in development, By implementing the useCallback and useMemo hooks with FlatList, the Performance of an app can be improved significantly. If your app has large lists in the application then always ensure that your component only re-render when necessary. Using these simple techniques while developing can be a huge boost in app performance.
Optimizing FlatList with the power of useMemo and useCallback will take React Native app performance to the next level
Happy coding!