React native Flatlist renders large data very slow

user_15280377 0
Viewed 741

I am using flatlist to render my data in react native but flatlist renders large amount of data very slow and after scrolling fast it re-renders the data. Due to which my app takes lots of time to display full data. I also got message like

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

I have tried all flatlist optimization techniques still flatlist rendering is slow. Any suggestions, how to solve this?

my flatlist component look like

<FlatList
     data={questionArray}
     showsVerticalScrollIndicator={false}
     renderItem={renderItem}
     keyExtractor={keyExtractor}
/>

const renderItem = useCallback(
        ({ item, index }) => {
                              ....
                             },
        []
    );

const keyExtractor = useCallback((item, index) => index.toString(), []);
flatlist react-native-flatlist react-native
2 Answers

There are some steps you can try out because it depends totally on the dataset as well as how you have implemented/consuming in your project.

  1. Try to make Class-based Component to React.PureComponent

  2. you can also try setting removeClippedSubviews to true.

     <FlatList removeClippedSubviews ..someOtherProps/>

  3. Add keyExtractor in your FlatList like this:

     <FlatList keyExtractor={keyExtractor} ... />

  4. Add onEndReached Function.

const [loader, setLoader] = useState(false);

const onEndReached = (page) => {
  if (next && !loader) {
    setPage(page + 1)
  }
}

const loadData = async () => {
  setLoader(true);
  const resp = await getData();
  setLoader(false);
}



<FlatList ...someprops onEndReached={onEndReached} />

  1. set initialNumToRender={integer-value}

  2. Found this :Flatlist Performance

user_77214970

May be it's possible by "useMemo()"

   const memoizedValue = useMemo(() => renderItem, [array]);

        <FlatList
            keyExtractor={keyExtractor}
            data={array}
            renderItem={memoizedValue}
        />
      const renderItem = ({ item }) => (
         <ListItem/>
      )
user_54790890
Related