React Native no luck with fixing my FlatList - VirtualizedList: You have a large list that is slow to update

Question

I have been trying to fix my virtualize list issue du to too many rendering apparently... this is happening when I go back and forth, from one item here: restaurant (restaurant screen) to the flatList with the tab bar, I have also been trying to render less items, but even when the limit is down it doesn't seems to work...

What I use

I'm using a animated bottom sheet that display the flatList on top of the mapView

what I tried

I have been looking ,and tried that out

and also that

and those issues too

I have tried to use the Hook useMemo but apparently it does work for complex stuff such as arrays, or I my config of the dependency was wrong:

const renderMemo = useMemo(() => renderItem, []) //what should be in the array? data? !isLoading ? limit ? ( the limit is change when onEndReached)

(code below)

I have tried to make a pure component of my list (renderItem)

ISSUE

I still get : VirtualizedList: You have a large list that is slow to update - make sure your renderItem function renders components that follow React performance best practices like PureComponent, shouldComponentUpdate, etc. Object { "contentLength": 5148.66650390625, "dt": 4164, "prevDt": 2313, } and in this particular set up after not doing anything for a while I got that error:

 _Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
at [native code]:null in dispatchAction
at containers/HomeScreen.js:87:16 in fetchData
at [native code]:null in flushedQueue
at [native code]:null in invokeCallbackAndReturnFlushedQueue_

I haven't tried shouldComponentUpdate as I don't really understand it... I mean I don't know where to locate it...

where should I head now ? memo maybe?

is there a way maybe to get less render from useEffect

CODE

repo native

HomeScreen:

  const renderContent = () =>
    !isLoading ? (
      <View style={styles.firstParentViewRenderContent}>
       ....
          <FlatListContents
            data={data}
            navigation={navigation}
            setLimit={setLimit}
            limit={limit}
            skip={skip}
            setSkip={setSkip}
            handleColors={handleColors}
          />
      </View> 
      

flatListContents component:

const handleLoadMore = () => {
   console.trace("handleMore");
   // console.log(limit);
   setIsLoadingMore(true);
   // if (limit > 30) setIsLoadingMore(false);
   if (!isLoading) {
     setLimit(limit + 10);
     setIsLoadingMore(false);
   }
 };

 // const renderMemo = useMemo(() => renderItem, []);

 const renderItem = ({ item }) => {
   return (
     <PureCompFlatlist
       item={item}
       handleColors={handleColors}
       navigation={navigation}
     />
   );
 };
 
  return (
    <FlatList
         data={data}
         keyExtractor={(item) => String(item.placeId)}
         renderItem={renderItem}
         removeClippedSubviews={true}
         maxToRenderPerBatch={20}
         initialNumToRender={5}
         windowSize={limit}
         getItemLayout={(data, index) => {
           return {
             length: styles.flatList.height,
             offset: 25 * styles.flatList.height,
             index,
           };
         }}
         onEndReached={handleLoadMore}
         onEndReachedThreshold={0.5}
         // ListFooterComponent={renderFooter}
       />

PureCompFlat:

export class PureCompFlatlist extends PureComponent {
  render() {
    const { item, handleColors, navigation } = this.props;
    return (
      <TouchableOpacity
        style={styles.flatList}
        onPress={() =>
          navigation.navigate("Restaurant", {
            id: item.placeId,
            name: item.name,
            description: item.description,
            rating: item.rating,
            thumbnail: item.thumbnail,
            color: handleColors(item.type),
          })
        }
      >
        <Image style={styles.flatListPic} source={{ uri: item.thumbnail }} />
        <View style={styles.flatListContent}>
          <View style={styles.flatListNameType}>
            <Text style={styles.flatListText}>{item.name}</Text>
            <Text style={styles.flatListText}>{item.type}</Text>
          </View>
          <Text style={styles.flatListText}>{item.rating}</Text>
          <Text style={styles.flatListText} numberOfLines={2}>
            {item.description}
          </Text>
        </View>
      </TouchableOpacity>
    );
  }
}

thanks in advance