CODEWITHSUNDEEP
react-nativeflatlist
Mark Hsiao
Mark Hsiao

Reputation: 21

VirtualizedList: You have a large list that is slow to update warning

this is a common question but somehow I have tried all the solutions I could find but still got this warning.

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": 5200, "dt": 2470, "prevDt": 2834}

I end up having just three simple files that could replicate this warning as my project. Home.js OtherScreen.js and App.js  Home just renders a Button and the a FlatList with only 8 items and each item is just a view of height 650 and some texts. The Button is to navigates to OtherScreen which contains just one text. Could someone help take a look? really really appreciate that! thanks so much in advance!!! Home.js

import { View, Text, FlatList, Button } from "react-native";
import React, { useState } from "react";

const Home = ({ navigation }) => {
  const [data, setData] = useState([
    { id: 1 },
    { id: 2 },
    { id: 3 },
    { id: 4 },
    { id: 5 },
    { id: 6 },
    { id: 7 },
    { id: 8 },
  ]);
  return (
    <>
      <Button
        onPress={() => {
          navigation.navigate("OtherScreen");
        }}
        title="go"
      ></Button>
      <FlatList
        data={data}
        keyExtractor={(item) => item.id}
        renderItem={() => {
          return (
            <View style={{ height: 650 }}>
              <Text>yo</Text>
            </View>
          );
        }}
      />
    </>
  );
};
export default Home;

OtherScreen.js

import { Text, View } from "react-native";
import React from "react";

const OtherScreen = () => {
  return (
    <View>
      <Text>OtherScreen</Text>
    </View>
  );
};

export default OtherScreen;

and App.js

import { Text } from "react-native";
import Home from "./src/Home";
import OtherScreen from "./src/OtherScreen";
import { createNativeStackNavigator } from "@react-navigation/native-stack";

import { NavigationContainer } from "@react-navigation/native";

const HomeStack = createNativeStackNavigator();

const HomeStackScreen = () => {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen
        name="Home"
        component={Home}
        options={({ navigation }) => ({
          title: null,
          headerLeft: () => {
            return <Text>Home</Text>;
          },
        })}
      />
      <HomeStack.Screen
        name="OtherScreen"
        component={OtherScreen}
        options={{ title: "Other" }}
      />
    </HomeStack.Navigator>
  );
};

export default function App() {
  return <NavigationContainer>{HomeStackScreen()}</NavigationContainer>;
}

Upvotes: 2

Views: 6150

Answers (1)

Vin Xi
Vin Xi

Reputation: 1307

Here are some tips for you to optimize the FlatList:

  1. If you already know the height is 650 then you should define it before rendering using getItemLayout so react-native doesn't need to calculate it during render.

    getItemLayout={(data, index) => ( {length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index} )}

  2. Avoid anonymous functions in RenderItem and keyExtractor for example:

    const _keyExtractor = (item) => item.key

    const _renderItem = ({item,index}) => {item}

  3. Use maxToRenderPerBatch to render limited items early on

  4. Lastly, memoize your functional components.

Upvotes: 2

Related Questions