LOG 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. {“contentLength”: 3236.363525390625, “dt”: 966, “prevDt”: 863}

Code used is given below, there is no Error in code but why that Log for VirtualizedList :-

return (
    <View style={ styles.container }>
      <JobSearchBar searchQuery={ searchQuery } setSearchQuery={ setSearchQuery } />
      <FlatList
        data={ filteredJobs }
        renderItem={ ( { item } ) => <JobCard job={ item } /> }
        ListHeaderComponent={ <Seperator /> }
        keyExtractor={ ( item ) => item.id.toString() }
        ItemSeparatorComponent={ <Seperator size={ 0.04 } /> }
        onEndReached={ hasNextPage && fetchNextPage }
        onEndReachedThreshold={ 0.5 }
        ListEmptyComponent={ isLoading && <Spinner /> }
        ListFooterComponent={ isFetchingNextPage ? <Spinner style={ { marginVertical: width * 0.05 } } /> : <Seperator size={ 0.055 } /> }
      />
    </View>
  );

import { useInfiniteQuery } from '@tanstack/react-query';
import api from '../utils/apiService';


const fetchJobs = async ( { pageParam = 1 } ) => {
  const res = await api.get( `/common/jobs?page=${ pageParam }` );
  return res.data;
};

export const useJobsQuery = () => {
  return useInfiniteQuery( {
    queryKey: ['jobs'],
    queryFn: fetchJobs,
    getNextPageParam: ( lastPage, pages ) => {
      if ( lastPage.results.length ) {
        return pages.length + 1;
      } else {
        return undefined;
      }
    },
  } );
};

const JobCard = ( { job } ) => {
  const router = useRouter();
  const dispatch = useDispatch();
  const bookmarks = useSelector( ( state ) => state.bookmarks.bookmarkedJobs );
  const isBookmarked = bookmarks.includes( job.id );

  /* ...handler functions */

  return (
    <TouchableOpacity activeOpacity={ 0.7 } onPress={ handleNavigation } style={ styles.card }>
      <View style={ styles.cardContent }>
        <Text numberOfLines={ 2 } style={ styles.title }>{ job.title }</Text>
        <Divider style={ { flex: 1, justifyContent: 'center' } } />

        <View style={ styles.flexCenter }>
          <Icon name='map-marker-outline' type='material-community' size={ IconFonts.sm } color={ Colors.light.tabIconDefault } />
          <Text style={ styles.details }>{ job.primary_details.Place }</Text>
        </View>

        <View style={ styles.flexCenter }>
          <Icon name='currency-inr' type='material-community' size={ IconFonts.sm } color={ Colors.light.tabIconDefault } />
          <Text style={ styles.details }>{ job.primary_details.Salary.length < 2 ? 'N/A' : job.primary_details.Salary?.replace( /₹/g, '' ) }</Text>
        </View>

        <View style={ styles.contactInfo }>
          <TouchableOpacity onPress={ handleWhatsAppNavigation } style={ styles.flexCenter }>
            <Icon name='whatsapp' type='material-community' size={ IconFonts.sm } color='#25D366' />
            <Text style={ styles.contactLink } onPress={ handleWhatsAppNavigation }>
              WhatsApp
            </Text>
          </TouchableOpacity>

          <TouchableOpacity onPress={ handleContactNavigation } style={ styles.flexCenter }>
            <Icon name='phone' type='material-community' size={ IconFonts.sm } color='#007AFF' />
            <Text style={ styles.contactLink } onPress={ handleContactNavigation }>
              { job?.custom_link?.replace( 'tel:', '' ) }
            </Text>
          </TouchableOpacity>

          {/* Bookmark Icon */ }
          <TouchableOpacity onPress={ handleBookmarkToggle }>
            <Icon name={ isBookmarked ? 'bookmark' : 'bookmark-outline' } type='material-community' color={ isBookmarked ? '#ffc100' : Colors.light.icon } size={ IconFonts.lg } />
          </TouchableOpacity>

        </View>
      </View>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create( {...} );

export default React.memo( JobCard );

I have shared the code above which I wrote and tried! But I don’t know how to remove that! May be trying some other library like FlashList, or FlatList itself but with some more props for improving performance!?