'Correct way to use memo in Flatlist react native

Good evening everyone . I have created the following Flatlist :

 <View style={{ flex: 1 }}>
          <FlatList
            ListFooterComponent={
              loadMore && page < pageMax ? (
                <ActivityIndicator color={Colors.grey40} />
              ) : (
                <View />
              )
            }
            ListFooterComponentStyle={{ height: 200 }}
            contentContainerStyle={styles.listExercise}
            keyExtractor={() => uuid.v4()}
            data={exercises}
            renderItem={renderItemRE}
            removeClippedSubviews={true}
            onEndReached={() => {
              setOnEndReachedCalledDuringMomentum(true);
            }}
            onMomentumScrollEnd={loadMoreFc}
            onEndReachedThreshold={0.3}
            ListEmptyComponent={
              <Text contentW B18>
                Nessuna Esercizio presente
              </Text>
            }
          />
        </View>

This is renderItem function

const renderItemRE = ({ item }) => {
    return (
      <RenderItemRE
        selectables={route.params?.selectables}
        item={item}
        navigation={navigation}
      />
    );
  };

And finally this is my component RenderItemRE

    const RenderItemRE = ({ item, navigation, selectables }) => {
    
      return (
        <View style={styles.globalContainer}>
          <TouchableOpacity
            style={styles.touchable}
            onPress={() => {
navigation.navigate(Routes.InfoEsercizio, {
                id_ex: item.id,
                nomeEx: item.nome,
              });
            }}
          >
    
            <View style={styles.container}>
              <Image
                indicator={Progress}
                style={styles.img}
                source={{
                  uri: item.galleria
                    ? item.galleria[0]
                      ? item.galleria[0]
                      : "logo"
                    : ApiConstants.DEFAULT_IMAGE,
                }}
              />
    
              <Text
                style={[
                  customtext(DYNAMIC_FONTS_SIZE.FONT_SIZE_BIG).regular,
                  styles.nameStyle,
                ]}
              >
                {item.nome}
              </Text>
            </View>
          </TouchableOpacity>
        </View>
      );
    };
    
    function arePropsEqual(prevProps, nextProps) {
      return nextProps.item.id === prevProps.item.id;
    }
    
    export default memo(RenderItemRE, arePropsEqual);

This is a correct way to use memo in react native ? Or am I doing something wrong? I'm noticing that when the list gets bigger the rendering slows down. I was wondering what was the correct way to optimize. Thank you in advance



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source