Question 33229 in React native Question posted in
The official React Native documentation can be found here.

VirtualizedList: You have a large list that is slow to update How can i fix this problem – React native

I am facing an error that says "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." Can anyone help me to fix this problem in my code? Also, sometimes posts load after 2-3 secs of time how can I load intensely?

MainPage:

export default function Home({ navigation }) {
  const [userdata, setUserdata] = useState(null);

  return (
    <View style={styles.container}>
      <StatusBar />
      <ButtomNavbar navigation={navigation} page={'home'} />
      <TopNavbar navigation={navigation} page={'home'} />
      <Posts />
    </View>
  );
}

Post Comp:

import { StyleSheet, FlatList } from 'react-native'
import React, { useState, useEffect, useCallback  } from 'react';
import PostCard from '../Cards/PostCard';


const Posts = () => {
    const [userData, setUserData] = useState([]);

    const fetchUserData = useCallback(async () => {
        try {
            const response = await fetch('http://10.0.2.2:3000/postdata');
            const data = await response.json();
            setUserData(data);
        } catch (err) {
            console.error(err);
        }
    }, []);

    useEffect(() => {
        fetchUserData();
    }, [fetchUserData]);

    return (
        <FlatList
            style={styles.container}
            data={userData}
            renderItem={({ item, index }) => (
                <PostCard
                    key={index}
                    username={item.username}
                    profile_image={item.profile_image}
                    postImage={item.postImage}
                />
            )}
        />
    );
}

export default Posts

Post Card:

import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';

const PostCard = ({ username, profile_image, postImage }) => {

  return (
    <View style={styles.container}>
      <View style={styles.c1}>
        <Image source={{ uri: profile_image }} style={styles.profilepic} />
        <Text style={styles.username}>{username}</Text>
      </View>
      <Image source={{ uri: postImage }} style={styles.image} />

    </View>
  );
};
Tags:

2

Answers


  1. 0

    Try adding the keyExtractor prop to your FlatList.
    Here is an example:

      return (
        <FlatList
            style={styles.container}
            data={userData}
             keyExtractor={(item) => `${item.id}`}  <-----add this line
            renderItem={({ item, index }) => (
                <PostCard
                    key={index}
                    username={item.username}
                    profile_image={item.profile_image}
                    postImage={item.postImage}
                />
            )}
        />
    );
    Login or Signup to reply.
  2. 0

    "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."

    This warning basically appear when you try to render too much data or objects using FlatList because when you have good amount of data , you have to manage that it will not be render again and again as renderItem call again and again with data when user scroll which consume more memory

    You can control this behaviour by creating renderItem class component and extend it with PureComponent instead of React.Component

    You can also control this behaviour by shouldComponentUpdate method as shown in this example

    https://www.geeksforgeeks.org/what-does-shouldcomponentupdate-do-and-why-is-it-important/

    If you think it is going to take your time then as simplest solution you can use this lib

    https://shopify.github.io/flash-list/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search