top of page
  • Writer's pictureMukesh Jangid

Optimize FlatList with the power of useMemo and useCallback



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!



2,443 views

Comments


bottom of page