When there is a large list , flat list is laggy and sometimes crashing app in react native

Question

Please help me. When there is a large list, flat list is laggy and sometimes crashing app in react native .

I have tried Optimized list: it is not showing images, and i have tried react-native large list. Nothing is working.

This is the code:

 {loading == false && (
                      <FlatList
                        data={this.state.data}
                        numColumns="2"
                        renderItem={({ item }) => <ExampleComponent url= 
                        {item.media} />}
                        keyExtractor={(item, index) => item.itemurl}
                        windowSize={15}
                        onEndReachedThreshold={1}
                        onEndReached={this.handleLoadMore}
                        removeClippedSubviews={true}
                        maxToRenderPerBatch={10}

                      />
                    )}

This is component class

import React, { PureComponent } from "react";
import { View, Text, StyleSheet, Image ,TouchableOpacity } from "react-native";
import FastImage from "react-native-fast-image";
export default class ExampleComponent extends PureComponent {
  constructor(props) {
    super(props);
    //console.log(this.props);
  }

  render() {
    return (
        <TouchableOpacity style={styles.imageContainer}>
      <View >
        <FastImage
          source={{
            uri:this.props.url
          }}
          style={styles.imageStyle}
        />
      </View>
      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  imageContainer: {
    flex: 1,
    borderWidth: 1,
    borderColor: "#dedede",
    borderRadius: 5,
    margin: 5
  },
  imageStyle: {
    flex: 1,
    width: null,
    height: 100,
    borderTopLeftRadius:5,
    borderTopRightRadius:5
  },

});

And im getting this message in console when rows are more

This is handle load more function

handleLoadMore = () => {
console.log("Called");

if (this.state.next != 0) {
  const u =
    "https://url&q=" +
    this.props.navigation.state.params.data +
    "&pos=" +
    this.state.next;
  fetch(u, {
    method: "GET"
  })
    .then(res => res.json())
    .then(response => {
      this.setState({
        data: [...this.state.data, ...response.results],
        next: response.next
      });
    });
}

}

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. {"dt":1098,"prevDt":684,"contentLength":6832}

try to remove initialNumToRender and adjust windowSize for your use case. Also, you can try legacyImplementation={true} and play around — Anurag Chutani, Oct 11 '18 at 09:52
How large is large? How many items are you rendering? Flatlist is the already optimised list for React Native. Please add the code for ExampleComponent as well. — c-chavez, Oct 11 '18 at 09:56
Large in the sense number of items after 100 + rows its laggy and crashes — T Jagadish Gupta, Oct 11 '18 at 09:58
And also when i wrap flat list in a scroll view , onendreached is called infinite times and app crashes and when i remove scroll view onendreached is called correctly — T Jagadish Gupta, Oct 11 '18 at 10:03
You shouldn't wrap a flatlist in a scrollview, as it is already an implementation of it. Have a read at [the official docs](https://facebook.github.io/react-native/docs/flatlist) — c-chavez, Oct 11 '18 at 10:06
@TJagadishGupta please add the code to your question. Edit the question and add all the relevant code. Please add all the ExampleComponent class or const code to your question. — c-chavez, Oct 11 '18 at 10:08
Thats absolutely correct but if i did not wrap it in scroll view enitre page is not scrolling , sorry im new to react native @c-chavez — T Jagadish Gupta, Oct 11 '18 at 10:09
@c-chavez i have updated the question , please help me i have been trying to resolve since three days — T Jagadish Gupta, Oct 11 '18 at 10:19
@TJagadishGupta don't worry we will get to your problem, but we need more information. Please add the handleLoadMore function code to your question. Also, if you want to add error messages to your question don't use images, they might get broken over time or hard to read in some devices. Please add the error message as text to your question. — c-chavez, Oct 11 '18 at 11:01
@c-chavez Thank you very much , i have pasted handleLoadMore method and also updated the console message — T Jagadish Gupta, Oct 11 '18 at 11:09
@TJagadishGupta are you wrapping the FlatList in something special? or is it just a view? — c-chavez, Oct 11 '18 at 11:36
I'm wrapping flatlist in a view and I have tried all your points its working in some phones when I tried in mi phone the app is crashing , can you give me an example code to implement flatlist correctly @c-chavez — T Jagadish Gupta, Oct 12 '18 at 05:50
@TJagadishGupta Which phone do you have? in which phones does it work? does it crash when it opens the flatlist or is it after you get to a certain part of your list? — c-chavez, Oct 12 '18 at 08:40
In pure android phones it works like one plus , Google , but in xaiomi Samsung crashes while scrolling more data — T Jagadish Gupta, Oct 12 '18 at 08:47
@c-chavez thanks man you are my hero recycler view is working like a charm thank you very much , oh man since 3 days I've been trying thank you very much — T Jagadish Gupta, Oct 13 '18 at 06:18
@TJagadishGupta You are welcome. Flatlist is tough to handle for large lists and some approaches that I mentioned worked in some cases for me so it all depends on your situation. — c-chavez, Oct 13 '18 at 09:16
Possible duplicate of [react native 100+ items flatlist very slow performance](https://stackoverflow.com/questions/44384773/react-native-100-items-flatlist-very-slow-performance) — I Putu Yoga Permana, Jun 07 '19 at 23:35

score 3 · Accepted Answer · answered Oct 11 '18 at 11:42

Since the performance of the Flatlist depends on each implementation, you can follow these suggestions to help you in your case.

Try combinations of these approaches:

Enable or disable legacyImplementation
Enable or disable disableVirtualization
Increase or decrease the value of onEndReachedThreshold
Increase or decrease the value of windowSize
Increase or decrease the value of maxToRenderPerBatch
Implement shouldComponentUpdate
Remove the constructor from ExampleComponent
Enable removeClippedSubviews only for Android
Use a simpler keyExtractor, a number if possible.

Actually from the docs:

The default extractor checks item.key, then falls back to using the index, like React does.

Also

Check in your render method how many items are being loaded and rendered in both ExampleComponent and your component that uses the FlatList.

Alternatively

Try using RecyclerListview component.

Further reading

@MatinZD I was trying to find this in the official repository but didn't find anything related, or probably at the time of my answer it wasn't used by `Flatlist`. If you can share with us where you saw this, we could add it to the answer to make it more complete, for Android devs, keeping in mind that it could be an alternative for IOS devs. — c-chavez, Sep 09 '19 at 09:52

score -2 · Answer 2 · answered Apr 23 '20 at 13:10

-2

Wrapping the whole Flatlist in a ScrollView worked for me.

answered Apr 23 '20 at 13:10

Mohit Sharma

529
1
6
17

When there is a large list , flat list is laggy and sometimes crashing app in react native

2 Answers2